@extends('layouts.admin.app')

@section('title', 'User Management')

@push('style')
<style>
    /* ============================================================
       PLAYER DETAILS MODAL — matches the admin dark theme
       (#7B61FF purple, #A0E86F green, #2B2B2B borders)
    ============================================================ */
    .player-modal {
        position: fixed;
        inset: 0;
        z-index: 1000;
        display: none;
        align-items: flex-start;
        justify-content: center;
        padding: 40px 16px;
        overflow-y: auto;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(3px);
    }

    .player-modal.open { display: flex; }

    .player-modal .modal-box {
        position: relative;
        width: 100%;
        max-width: 920px;
        background: #0f0f0f;
        border: 1px solid #2B2B2B;
        border-radius: 16px;
        padding: 24px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
        animation: playerModalIn .18s ease;
    }

    @keyframes playerModalIn {
        from { opacity: 0; transform: translateY(12px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .player-modal .modal-close {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1px solid #2B2B2B;
        background: #161616;
        color: #ccc;
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: .2s;
        z-index: 2;
    }

    .player-modal .modal-close:hover { background: #7B61FF; color: #fff; border-color: #7B61FF; }

    .player-modal .modal-loading {
        padding: 60px 0;
        text-align: center;
        color: #777;
        font-size: 14px;
    }

    /* ---------- player detail content (scoped) ---------- */
    .player_detail { color: #fff; }

    .player_detail .profile_header {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 20px;
        border-radius: 14px;
        background: linear-gradient(135deg, #141414, #1a1a1a);
        border: 1px solid #2B2B2B;
        margin-bottom: 20px;
        flex-wrap: wrap;
    }

    .player_detail .profile_header .avatar {
        width: 84px;
        height: 84px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid #7B61FF;
        flex-shrink: 0;
    }

    .player_detail .head_info { flex: 1; min-width: 200px; }

    .player_detail .download_pdf_btn {
        display: inline-flex;
        align-items: center;
        padding: 9px 16px;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        color: #fff;
        background: #7B61FF;
        border: 1px solid #7B61FF;
        transition: .2s;
        white-space: nowrap;
        align-self: flex-start;
    }
    .player_detail .download_pdf_btn:hover { background: #6a4ff0; }

    .player_detail .head_info h2 {
        margin: 0 0 6px;
        font-size: 20px;
        font-weight: 700;
        color: #fff;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .player_detail .head_info .sub {
        display: flex;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
        font-size: 13px;
        color: #94A3B8;
    }

    .player_detail .head_info .sub span { display: flex; align-items: center; gap: 6px; }

    .player_detail .head_info .sub svg {
        width: 15px; height: 15px;
        stroke: #7B61FF; fill: none; stroke-width: 2;
    }

    /* badges / tags */
    .player_detail .badge { font-size: 11px; font-weight: 500; padding: 4px 12px; border-radius: 20px; }
    .player_detail .badge.verified { background: rgba(16, 185, 129, 0.15); color: #10b981; }
    .player_detail .badge.pending,
    .player_detail .badge.waitlisted { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
    .player_detail .badge.rejected,
    .player_detail .badge.cancelled { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

    .player_detail .tag {
        font-size: 12px; font-weight: 600; padding: 5px 14px; border-radius: 10px;
        background: rgba(123, 97, 255, 0.15); color: #9B5FFF;
    }

    /* stat cards */
    .player_detail .stat_grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
        margin-bottom: 20px;
    }

    .player_detail .stat_card {
        display: flex; align-items: center; gap: 12px;
        padding: 18px 16px; border-radius: 12px;
        background: linear-gradient(135deg, #141414, #1a1a1a);
        border: 1px solid #2B2B2B;
    }

    .player_detail .stat_card .icon {
        width: 42px; height: 42px; border-radius: 10px;
        display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }

    .player_detail .stat_card .icon svg { width: 20px; height: 20px; }
    .player_detail .icon.purple { background: rgba(123, 97, 255, 0.15); color: #7B61FF; }
    .player_detail .icon.green  { background: rgba(160, 232, 111, 0.15); color: #A0E86F; }
    .player_detail .icon.orange { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
    .player_detail .icon.blue   { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }

    .player_detail .stat_card .meta span { display: block; font-size: 12px; color: #777; margin-bottom: 3px; }
    .player_detail .stat_card .meta h3 { margin: 0; font-size: 19px; font-weight: 700; color: #fff; }

    /* layout */
    .player_detail .detail_grid {
        display: grid;
        grid-template-columns: 300px 1fr;
        gap: 16px;
        align-items: start;
    }

    .player_detail .panel {
        background: linear-gradient(135deg, #141414, #1a1a1a);
        border: 1px solid #2B2B2B;
        border-radius: 14px;
        padding: 18px;
        margin-bottom: 16px;
    }

    .player_detail .panel h4 {
        margin: 0 0 14px; font-size: 15px; font-weight: 600; color: #fff;
        padding-bottom: 12px; border-bottom: 1px solid #242424;
    }

    .player_detail .info_row {
        display: flex; justify-content: space-between; align-items: center; gap: 12px;
        padding: 9px 0; font-size: 13px; border-bottom: 1px solid #1c1c1c;
    }
    .player_detail .info_row:last-child { border-bottom: 0; }
    .player_detail .info_row .k { color: #777; }
    .player_detail .info_row .v { color: #fff; font-weight: 500; text-align: right; }

    /* tabs */
    .player_detail .tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
    .player_detail .tabs .tab {
        padding: 8px 16px; border-radius: 10px; font-size: 13px; color: #94A3B8;
        background: #161616; border: 1px solid #242424; cursor: pointer; transition: .2s;
    }
    .player_detail .tabs .tab:hover { color: #fff; }
    .player_detail .tabs .tab.active { background: #7B61FF; color: #fff; border-color: #7B61FF; }
    .player_detail .tab_pane { display: none; }
    .player_detail .tab_pane.active { display: block; }

    .player_detail .mini_grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 12px;
    }
    .player_detail .mini { background: #111; border: 1px solid #242424; border-radius: 10px; padding: 12px 14px; }
    .player_detail .mini span { display: block; font-size: 11px; color: #777; margin-bottom: 4px; }
    .player_detail .mini strong { font-size: 16px; color: #A0E86F; font-weight: 700; }

    /* achievements */
    .player_detail .achievement {
        display: flex; align-items: center; gap: 12px;
        padding: 11px 0; border-bottom: 1px solid #1c1c1c;
    }
    .player_detail .achievement:last-child { border-bottom: 0; }
    .player_detail .achievement .a_icon {
        width: 34px; height: 34px; border-radius: 8px;
        display: flex; align-items: center; justify-content: center;
        background: rgba(245, 158, 11, 0.15); color: #f59e0b; flex-shrink: 0;
    }
    .player_detail .achievement .a_icon svg { width: 16px; height: 16px; }
    .player_detail .achievement strong { display: block; font-size: 13px; color: #fff; }
    .player_detail .achievement small { font-size: 11px; color: #777; }

    /* sponsor / team owner extras */
    .player_detail .avatar.square { border-radius: 12px; }
    .player_detail .stat_grid.three { grid-template-columns: repeat(3, 1fr); }
    .player_detail .link { color: #7B61FF; text-decoration: none; }
    .player_detail .link:hover { text-decoration: underline; }
    .player_detail .desc { margin: 0; font-size: 13px; line-height: 1.6; color: #aaa; }

    .player_detail .budget_bar {
        height: 8px; border-radius: 20px; background: #242424; overflow: hidden; margin-bottom: 10px;
    }
    .player_detail .budget_fill {
        height: 100%; border-radius: 20px;
        background: linear-gradient(90deg, #7B61FF, #A0E86F);
    }
    .player_detail .budget_legend {
        display: flex; justify-content: space-between; font-size: 12px; color: #94A3B8; margin-bottom: 12px;
    }
    .player_detail .budget_legend strong { color: #fff; }

    @media (max-width: 900px) {
        .player_detail .stat_grid,
        .player_detail .stat_grid.three { grid-template-columns: repeat(2, 1fr); }
        .player_detail .detail_grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 520px) {
        .player_detail .stat_grid { grid-template-columns: 1fr; }
        .player-modal { padding: 16px 10px; }
        .player-modal .modal-box { padding: 18px; }
    }

    /* ============================================================
       EDIT FORM — shared by player / team owner / sponsor modals
    ============================================================ */
    .edit_form { color: #fff; }
    .edit_form .edit_title {
        margin: 0 0 20px; font-size: 18px; font-weight: 700; color: #fff;
        padding-right: 40px;
    }

    .edit_form .form_section {
        background: linear-gradient(135deg, #141414, #1a1a1a);
        border: 1px solid #2B2B2B;
        border-radius: 14px;
        padding: 18px;
        margin-bottom: 16px;
    }
    .edit_form .form_section h4 {
        margin: 0 0 16px; font-size: 15px; font-weight: 600; color: #fff;
        padding-bottom: 12px; border-bottom: 1px solid #242424;
    }

    .edit_form .form_grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px 16px;
    }
    .edit_form .form_grid.four { grid-template-columns: repeat(4, 1fr); }

    .edit_form .form_group { display: flex; flex-direction: column; gap: 6px; }
    .edit_form .form_group.full { margin-top: 14px; }
    .edit_form .form_group label {
        font-size: 12px; color: #94A3B8; font-weight: 500;
    }
    .edit_form .form_group input,
    .edit_form .form_group select,
    .edit_form .form_group textarea {
        width: 100%;
        background: #0f0f0f;
        border: 1px solid #2B2B2B;
        border-radius: 10px;
        padding: 10px 12px;
        color: #fff;
        font-size: 13px;
        outline: none;
        transition: border-color .2s;
    }
    .edit_form .form_group textarea { resize: vertical; min-height: 70px; }
    .edit_form .form_group input:focus,
    .edit_form .form_group select:focus,
    .edit_form .form_group textarea:focus { border-color: #7B61FF; }
    .edit_form .form_group select option { background: #0f0f0f; color: #fff; }
    .edit_form .form_group input:disabled,
    .edit_form .form_group select:disabled { opacity: .5; cursor: not-allowed; }
    .edit_form .form_group input[readonly] { background: #161616; color: #94A3B8; cursor: not-allowed; }

    .edit_form .check_group { flex-direction: row; align-items: center; gap: 20px; padding-top: 22px; }
    .edit_form .check { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; color: #fff; cursor: pointer; }
    .edit_form .check input { width: auto; }

    .edit_form .form_footer {
        display: flex; justify-content: flex-end; gap: 12px;
        margin-top: 4px; padding-top: 6px;
    }
    .edit_form .btn_primary,
    .edit_form .btn_ghost {
        padding: 11px 22px; border-radius: 10px; font-size: 14px; font-weight: 600;
        cursor: pointer; border: 1px solid transparent; transition: .2s;
    }
    .edit_form .btn_primary { background: #7B61FF; color: #fff; }
    .edit_form .btn_primary:hover { background: #6a4ff0; }
    .edit_form .btn_primary:disabled { opacity: .6; cursor: not-allowed; }
    .edit_form .btn_ghost { background: #161616; color: #ccc; border-color: #2B2B2B; }
    .edit_form .btn_ghost:hover { background: #202020; color: #fff; }

    @media (max-width: 700px) {
        .edit_form .form_grid,
        .edit_form .form_grid.four { grid-template-columns: repeat(2, 1fr); }
        .edit_form .check_group { padding-top: 0; }
    }
    @media (max-width: 480px) {
        .edit_form .form_grid,
        .edit_form .form_grid.four { grid-template-columns: 1fr; }
    }

    /* ============================================================
       PLAYER EDIT FORM — image-matched fields
    ============================================================ */
    .edit_form .form_grid.three { grid-template-columns: repeat(3, 1fr); }

    /* avatar header */
    .player_edit_form .pe_avatar_wrap {
        display: flex; justify-content: center; margin-bottom: 18px;
    }
    .player_edit_form .pe_avatar {
        position: relative; width: 96px; height: 96px; border-radius: 50%;
        border: 3px solid #7B61FF; flex-shrink: 0; cursor: pointer; display: block;
    }
    .player_edit_form .pe_avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
    .player_edit_form .pe_avatar .pe_avatar_edit {
        position: absolute; right: -2px; bottom: -2px;
        width: 30px; height: 30px; border-radius: 50%;
        background: #A0E86F; color: #0f0f0f;
        display: flex; align-items: center; justify-content: center;
        border: 2px solid #0f0f0f; transition: .2s;
    }
    .player_edit_form .pe_avatar:hover .pe_avatar_edit { background: #7B61FF; color: #fff; }
    /* square variant for sponsor / team logos */
    .player_edit_form .pe_avatar.square { border-radius: 16px; }
    .player_edit_form .pe_avatar.square img { border-radius: 13px; }

    /* "Other" popularity-skill free-text field */
    .edit_form .skill_other { margin-top: 10px; }

    /* section head with an "add" button */
    .edit_form .section_head {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid #242424;
    }
    .edit_form .section_head h4 { margin: 0; padding: 0; border: 0; }

    .edit_form .social_title { color: #A0E86F; }

    /* base price with a suffix pill */
    .edit_form .input_suffix { position: relative; display: flex; align-items: center; }
    .edit_form .input_suffix input { padding-right: 120px; }
    .edit_form .input_suffix .suffix {
        position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
        font-size: 13px; color: #94A3B8; pointer-events: none;
    }

    /* popularity-skill chips */
    .edit_form .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
    .edit_form .chips:empty { margin-top: 0; }
    .edit_form .chip {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 500;
        background: rgba(160, 232, 111, 0.12); color: #A0E86F;
        border: 1px solid rgba(160, 232, 111, 0.35);
    }
    .edit_form .chip .chip_x {
        background: none; border: 0; color: #A0E86F; cursor: pointer;
        font-size: 15px; line-height: 1; padding: 0; display: flex;
    }
    .edit_form .chip .chip_x:hover { color: #fff; }

    /* repeatable rows (performances / achievements) */
    .edit_form .repeat_list { display: flex; flex-direction: column; gap: 14px; }
    .edit_form .repeat_row {
        background: #0f0f0f; border: 1px solid #2B2B2B; border-radius: 12px; padding: 14px;
    }
    .edit_form .repeat_row_foot {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        margin-top: 12px;
    }
    .edit_form .repeat_row_foot .check {
        display: inline-flex; flex-direction: row; align-items: center; gap: 8px;
        font-size: 13px; color: #fff; cursor: pointer;
    }
    .edit_form .repeat_row_foot .check input { width: auto; }
    .edit_form .add_row {
        background: rgba(123, 97, 255, 0.15); color: #9B5FFF; border: 1px solid rgba(123, 97, 255, 0.4);
        padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
        transition: .2s; white-space: nowrap;
    }
    .edit_form .add_row:hover { background: #7B61FF; color: #fff; }
    .edit_form .remove_row {
        background: rgba(239, 68, 68, 0.12); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.35);
        padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer;
        transition: .2s;
    }
    .edit_form .remove_row:hover { background: #ef4444; color: #fff; }

    @media (max-width: 700px) {
        .edit_form .form_grid.three { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 480px) {
        .edit_form .form_grid.three { grid-template-columns: 1fr; }
    }

    /* Row action menu — disabled state for registrations without a player profile */
    .users_list td.item .option.disabled {
        color: #555;
        cursor: not-allowed;
    }
    .users_list td.item .option.disabled:hover { background: transparent; }
    .users_list td.item .option.hint {
        color: #f59e0b;
        font-size: 11px;
        cursor: default;
        border-top: 1px solid #333;
        margin-top: 2px;
        padding-top: 5px;
    }
    .users_list td.item .option.hint:hover { background: transparent; }

    /* Category <select> shown inside the SweetAlert "Assign Category" dialog */
    .swal_select {
        width: 100%;
        padding: 10px 12px;
        border-radius: 8px;
        background: #161616;
        color: #fff;
        border: 1px solid #2B2B2B;
        font-size: 14px;
        outline: none;
    }
    .swal_select:focus { border-color: #7B61FF; }
    .swal_select option { background: #161616; color: #fff; }

    /* ============================================================
       PROFILE IMAGE LIGHTBOX — click a row avatar to see it full size
    ============================================================ */
    .users_list .avatar img { cursor: zoom-in; }

    .image-lightbox {
        position: fixed;
        inset: 0;
        z-index: 1100;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 40px 16px;
        background: rgba(0, 0, 0, 0.85);
        backdrop-filter: blur(3px);
    }

    .image-lightbox.open { display: flex; }

    .image-lightbox img {
        max-width: min(560px, 90vw);
        max-height: 85vh;
        width: auto;
        height: auto;
        border-radius: 16px;
        border: 3px solid #7B61FF;
        background: #0f0f0f;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
        animation: playerModalIn .18s ease;
    }

    .image-lightbox .lightbox-close {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1px solid #2B2B2B;
        background: #161616;
        color: #ccc;
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: .2s;
    }

    .image-lightbox .lightbox-close:hover { background: #7B61FF; color: #fff; border-color: #7B61FF; }

    /* The Players "+ Add Player" control is a link to the create page. */
    .users_list .controls a.add-btn { display: inline-block; text-decoration: none; }
</style>
@endpush

@section('content')
<div class="users_list">
    @include('admin.layouts.alert')

    <div class="topbar">
        <select class="league-select" id="leagueSelect">
            <option value="">Select League</option>
        </select>

        <div class="tabs">
            <div class="tab active" data-tab="players">Players</div>
            <div class="tab" data-tab="team">Team Owners</div>
            <div class="tab" data-tab="sponsor">Sponsor</div>
        </div>
    </div>

    {{-- ===================== PLAYERS ===================== --}}
    <div id="players" class="tab-content" data-type="players">

        <div class="controls">
            <input class="search" data-search placeholder="Search here...">
            <div class="filter-dropdown" data-role="status-filter">
                <input type="hidden" data-filter="status" value="">
                <button type="button" class="filter-trigger">
                    <span class="filter-text">All Status</span>
                    <span class="arrow">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="#BABABA"><path d="M6.29289 8.29289C6.68342 7.90237 7.31658 7.90237 7.70711 8.29289L12 12.5858L16.2929 8.29289C16.6834 7.90237 17.3166 7.90237 17.7071 8.29289C18.0976 8.68342 18.0976 9.31658 17.7071 9.70711L12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L6.29289 9.70711C5.90237 9.31658 5.90237 8.68342 6.29289 8.29289Z"/></svg>
                    </span>
                </button>
                <div class="filter-menu">
                    <div class="filter-option selected" data-value="">All Status</div>
                    @foreach (App\Models\LeagueRegistration::STATUS_NAMES as $name => $value)
                        <div class="filter-option" data-value="{{ $value }}">{{ ucfirst($name) }}</div>
                    @endforeach
                </div>
            </div>
            <div class="filter-dropdown" data-role="category-filter">
                <input type="hidden" data-filter="category" value="">
                <button type="button" class="filter-trigger">
                    <span class="filter-text">All Categories</span>
                    <span class="arrow">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="#BABABA"><path d="M6.29289 8.29289C6.68342 7.90237 7.31658 7.90237 7.70711 8.29289L12 12.5858L16.2929 8.29289C16.6834 7.90237 17.3166 7.90237 17.7071 8.29289C18.0976 8.68342 18.0976 9.31658 17.7071 9.70711L12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L6.29289 9.70711C5.90237 9.31658 5.90237 8.68342 6.29289 8.29289Z"/></svg>
                    </span>
                </button>
                <div class="filter-menu">
                    <div class="filter-option selected" data-value="">All Categories</div>
                </div>
            </div>
            <div class="filter-dropdown" data-role="gender-filter">
                <input type="hidden" data-filter="gender" value="">
                <button type="button" class="filter-trigger">
                    <span class="filter-text">All Genders</span>
                    <span class="arrow">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="#BABABA"><path d="M6.29289 8.29289C6.68342 7.90237 7.31658 7.90237 7.70711 8.29289L12 12.5858L16.2929 8.29289C16.6834 7.90237 17.3166 7.90237 17.7071 8.29289C18.0976 8.68342 18.0976 9.31658 17.7071 9.70711L12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L6.29289 9.70711C5.90237 9.31658 5.90237 8.68342 6.29289 8.29289Z"/></svg>
                    </span>
                </button>
                <div class="filter-menu">
                    <div class="filter-option selected" data-value="">All Genders</div>
                    @foreach (App\Models\User::GENDER_NAMES as $name => $value)
                        <div class="filter-option" data-value="{{ $value }}">{{ ucfirst($name) }}</div>
                    @endforeach
                </div>
            </div>
            <a class="add-btn" href="{{ route('admin.users.players.create') }}">+ Add Player</a>
        </div>

        <div class="table-wrap">
            <table>
                <thead>
                    <tr>
                        <th>Player ID</th>
                        <th>Player Name</th>
                        <th>Role</th>
                        <th>Category</th>
                        <th>Base ICL Coins</th>
                        <th>Payment</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>

            <div class="pagination">
                <div>
                    {{-- <select name="" id="">
                        <option value="1">Pagination 1</option>
                        <option value="2">Pagination 2</option>
                    </select> --}}
                    Total Records : <span data-total>00</span></div>
                <div class="pages"></div>
            </div>

        </div>

    </div>

    {{-- ===================== TEAM OWNERS ===================== --}}
    <div id="team" class="tab-content" data-type="team_owners" style="display:none">
        <div class="controls">
            <input class="search" data-search placeholder="Search here...">
            <div class="filter-dropdown" data-role="status-filter">
                <input type="hidden" data-filter="status" value="">
                <button type="button" class="filter-trigger">
                    <span class="filter-text">All Status</span>
                    <span class="arrow">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="#BABABA"><path d="M6.29289 8.29289C6.68342 7.90237 7.31658 7.90237 7.70711 8.29289L12 12.5858L16.2929 8.29289C16.6834 7.90237 17.3166 7.90237 17.7071 8.29289C18.0976 8.68342 18.0976 9.31658 17.7071 9.70711L12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L6.29289 9.70711C5.90237 9.31658 5.90237 8.68342 6.29289 8.29289Z"/></svg>
                    </span>
                </button>
                <div class="filter-menu">
                    <div class="filter-option selected" data-value="">All Status</div>
                    @foreach (App\Models\LeagueRegistration::STATUS_NAMES as $name => $value)
                        <div class="filter-option" data-value="{{ $value }}">{{ ucfirst($name) }}</div>
                    @endforeach
                </div>
            </div>
            {{-- <select class="select">
                <option>All Categories</option>
            </select> --}}
            {{-- <button class="add-btn">+ Add Owner</button> --}}
        </div>

        <div class="table-wrap">
            <table>
                <thead>
                    <tr>
                        <th>Owner ID</th>
                        <th>Team Name</th>
                        <th>Owner Name</th>
                        <th>Total Budget</th>
                        <th>Remaining Budget</th>
                        <th>Players Bought</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>

            <div class="pagination">
                <div>
                    {{-- <select name="" id="">
                        <option value="1">Pagination 1</option>
                        <option value="2">Pagination 2</option>
                    </select> --}}
                    Total Records : <span data-total>00</span></div>
                <div class="pages"></div>
            </div>

        </div>
    </div>

    {{-- ===================== SPONSORS ===================== --}}
    <div id="sponsor" class="tab-content" data-type="sponsors" style="display:none">
        <div class="controls">
            <input class="search" data-search placeholder="Search here...">
            <div class="filter-dropdown" data-role="status-filter">
                <input type="hidden" data-filter="status" value="">
                <button type="button" class="filter-trigger">
                    <span class="filter-text">All Status</span>
                    <span class="arrow">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="#BABABA"><path d="M6.29289 8.29289C6.68342 7.90237 7.31658 7.90237 7.70711 8.29289L12 12.5858L16.2929 8.29289C16.6834 7.90237 17.3166 7.90237 17.7071 8.29289C18.0976 8.68342 18.0976 9.31658 17.7071 9.70711L12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L6.29289 9.70711C5.90237 9.31658 5.90237 8.68342 6.29289 8.29289Z"/></svg>
                    </span>
                </button>
                <div class="filter-menu">
                    <div class="filter-option selected" data-value="">All Status</div>
                    @foreach (App\Models\LeagueRegistration::STATUS_NAMES as $name => $value)
                        <div class="filter-option" data-value="{{ $value }}">{{ ucfirst($name) }}</div>
                    @endforeach
                </div>
            </div>
            {{-- <select class="select">
                <option>All Categories</option>
            </select> --}}
            {{-- <button class="add-btn">+ Add Sponsor</button> --}}
        </div>

        <div class="table-wrap">
            <table>
                <thead>
                    <tr>
                        <th>Sponsor ID</th>
                        <th>Sponsor Name</th>
                        <th>Company Name</th>
                        <th>Company Link</th>
                        <th>Active Offers</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>

            <div class="pagination">
                <div>
                    {{-- <select name="" id="">
                        <option value="1">Pagination 1</option>
                        <option value="2">Pagination 2</option>
                    </select> --}}
                    Total Records : <span data-total>00</span></div>
                <div class="pages"></div>
            </div>

        </div>
    </div>
</div>

{{-- ===================== PLAYER DETAILS MODAL ===================== --}}
<div class="player-modal" id="playerModal" aria-hidden="true">
    <div class="modal-box">
        <button type="button" class="modal-close" data-close-modal aria-label="Close">&times;</button>
        <div class="modal-body" id="playerModalBody">
            <div class="modal-loading">Loading player details…</div>
        </div>
    </div>
</div>

{{-- ===================== EDIT MODAL (player / team owner / sponsor) ===================== --}}
<div class="player-modal" id="editModal" aria-hidden="true">
    <div class="modal-box">
        <button type="button" class="modal-close" data-close-edit aria-label="Close">&times;</button>
        <div class="modal-body" id="editModalBody">
            <div class="modal-loading">Loading…</div>
        </div>
    </div>
</div>

{{-- ===================== PROFILE IMAGE LIGHTBOX ===================== --}}
<div class="image-lightbox" id="imageLightbox" aria-hidden="true">
    <button type="button" class="lightbox-close" data-close-lightbox aria-label="Close">&times;</button>
    <img id="imageLightboxImg" src="" alt="Profile image">
</div>
@endsection

@push('script')
<script src="{{ asset('assets/js/admin/toast.js') }}"></script>
<script>
    (function () {
        // -------- config wired to the already-existing backend endpoints --------
        const ROUTES = {
            meta: "{{ route('admin.users.index') }}",
            data: "{{ route('admin.users.data') }}",
            updateStatus: "{{ route('admin.users.update.status') }}",
            updateCategory: "{{ route('admin.users.update.category') }}",
            delete: "{{ route('admin.users.delete') }}",
        };
        const CSRF = "{{ csrf_token() }}";
        const PAGE_SIZE = 10;

        // Column order per backend type — must match the keys returned by the
        // *DatatableService classes and the number of <th> in each table.
        const COLUMNS = {
            players: ['id', 'player_name', 'role', 'category', 'base_price', 'payment', 'status', 'actions'],
            team_owners: ['owner_id','team_name', 'owner_name',  'total_budget', 'remaining_budget', 'players_bought', 'status', 'actions'],
            sponsors: ['sponsor_id', 'company_name', 'contact_person_name', 'sponsorship_type', 'sponsorship_amount', 'status', 'actions'],
        };

        const COLOR_CLASSES = ['red', 'green', 'blue', 'yellow', 'paid', 'unpaid', 'approved', 'sold', 'pending', 'rejected'];

        const PREV_SVG = '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.99973 13.2807L5.65307 8.93404C5.13973 8.4207 5.13973 7.5807 5.65307 7.06737L9.99973 2.7207" stroke="#A0E86F" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" /></svg>';
        const NEXT_SVG = '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.00027 13.2807L10.3469 8.93404C10.8603 8.4207 10.8603 7.5807 10.3469 7.06737L6.00027 2.7207" stroke="#A0E86F" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" /></svg>';

        const leagueSelect = document.getElementById('leagueSelect');
        const tabs = document.querySelectorAll('.users_list .tab');
        const panes = document.querySelectorAll('.users_list .tab-content');

        function isMobile() { return window.innerWidth <= 767; }
        function paneForTab(tab) { return document.getElementById(tab.dataset.tab); }
        function activeTab() { return document.querySelector('.users_list .tab.active'); }

        // -------- helpers --------
        function debounce(fn, wait) {
            let t;
            return function () {
                clearTimeout(t);
                t = setTimeout(() => fn.apply(this, arguments), wait);
            };
        }

        function notify(message) {
            if (typeof Swal !== 'undefined') {
                Swal.fire(swalOpts({ icon: 'error', title: 'Error', text: message }));
            } else if (typeof showAdminToast === 'function') {
                showAdminToast(message, 'error');
            } else {
                alert(message);
            }
        }

        function postJson(url, data) {
            return fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': CSRF,
                },
                body: JSON.stringify(data),
            }).then(async (r) => {
                const body = await r.json().catch(() => ({}));
                if (!r.ok) {
                    throw (body.message
                        || (body.errors ? Object.values(body.errors).flat().join('\n') : null)
                        || 'Request failed.');
                }
                return body;
            });
        }

        // -------- table loading / rendering --------
        function fetchTab(pane, page) {
            page = page || 1;
            const type = pane.dataset.type;
            const cols = COLUMNS[type];
            const tbody = pane.querySelector('tbody');

            const params = new URLSearchParams({
                type: type,
                league_id: leagueSelect.value || '',
                search: (pane.querySelector('[data-search]') || {}).value || '',
                status: (pane.querySelector('[data-filter="status"]') || {}).value || '',
                category: (pane.querySelector('[data-filter="category"]') || {}).value || '',
                gender: (pane.querySelector('[data-filter="gender"]') || {}).value || '',
                start: (page - 1) * PAGE_SIZE,
                length: PAGE_SIZE,
                draw: 1,
            });

            tbody.innerHTML = '<tr><td colspan="' + cols.length + '" style="text-align:center">Loading...</td></tr>';

            fetch(ROUTES.data + '?' + params.toString(), {
                headers: { 'X-Requested-With': 'XMLHttpRequest' },
            })
                .then((r) => r.json())
                .then((res) => renderTab(pane, res, page))
                .catch(() => {
                    tbody.innerHTML = '<tr><td colspan="' + cols.length + '" style="text-align:center">Failed to load data.</td></tr>';
                });
        }

        function renderTab(pane, res, page) {
            const type = pane.dataset.type;
            const cols = COLUMNS[type];
            const tbody = pane.querySelector('tbody');
            const rows = res.data || [];

            if (!rows.length) {
                tbody.innerHTML = '<tr><td colspan="' + cols.length + '" style="text-align:center">No records found.</td></tr>';
            } else {
                tbody.innerHTML = rows.map((row) => {
                    const cells = cols.map((key) => {
                        const val = row[key] != null ? row[key] : '';
                        // The actions cell needs these classes so the row-menu JS works.
                        if (key === 'actions') return '<td class="actions item">' + val + '</td>';
                        // Tag the base price cell so it can be refreshed when a category is assigned.
                        if (key === 'base_price') return '<td class="base-price-cell">' + val + '</td>';
                        // Tag budget cells so they can be refreshed after an owner-as-player reserve deduction.
                        if (key === 'total_budget') return '<td class="total-budget-cell">' + val + '</td>';
                        if (key === 'remaining_budget') return '<td class="remaining-budget-cell">' + val + '</td>';
                        if (key === 'players_bought') return '<td class="players-bought-cell">' + val + '</td>';
                        return '<td>' + val + '</td>';
                    }).join('');
                    return '<tr>' + cells + '</tr>';
                }).join('');
            }

            renderPagination(pane, res.recordsFiltered || 0, page);
        }

        function renderPagination(pane, total, page) {
            const totalEl = pane.querySelector('[data-total]');
            if (totalEl) totalEl.textContent = String(total).padStart(2, '0');

            const pages = pane.querySelector('.pages');
            if (!pages) return;

            const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
            const prevPage = Math.max(1, page - 1);
            const nextPage = Math.min(totalPages, page + 1);

            let html = '<a href="#" class="page" data-page="' + prevPage + '"' + (page <= 1 ? ' data-disabled' : '') + '>' + PREV_SVG + '</a>';
            for (let i = 1; i <= totalPages; i++) {
                html += '<a href="#" class="page' + (i === page ? ' active' : '') + '" data-page="' + i + '">' + i + '</a>';
            }
            html += '<a href="#" class="page" data-page="' + nextPage + '"' + (page >= totalPages ? ' data-disabled' : '') + '>' + NEXT_SVG + '</a>';

            pages.innerHTML = html;
            pages.dataset.page = page;
        }

        // -------- custom rounded filter dropdown (status / category) --------
        function selectFilterOption(dd, option, fireChange) {
            if (!dd || !option) return;
            const hidden = dd.querySelector('input[type="hidden"][data-filter]');
            const text = dd.querySelector('.filter-text');
            hidden.value = option.dataset.value || '';
            if (text) text.textContent = option.textContent.trim();
            dd.querySelectorAll('.filter-option').forEach((o) => o.classList.remove('selected'));
            option.classList.add('selected');
            dd.classList.remove('open');
            if (fireChange) hidden.dispatchEvent(new Event('change', { bubbles: true }));
        }

        // -------- filter data (leagues + player categories) --------
        function fillCategories(categories) {
            const dd = document.querySelector('#players .filter-dropdown[data-role="category-filter"]');
            if (!dd) return;
            const hidden = dd.querySelector('input[type="hidden"][data-filter]');
            const menu = dd.querySelector('.filter-menu');
            const current = hidden.value;

            menu.innerHTML = '<div class="filter-option selected" data-value="">All Categories</div>'
                + (categories || []).map((c) => '<div class="filter-option" data-value="' + c.id + '">' + c.name + '</div>').join('');

            const match = current
                ? menu.querySelector('.filter-option[data-value="' + current + '"]')
                : menu.querySelector('.filter-option[data-value=""]');
            selectFilterOption(dd, match || menu.querySelector('.filter-option[data-value=""]'), false);
        }

        function loadMeta() {
            return fetch(ROUTES.meta, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                .then((r) => r.json())
                .then((res) => {
                    const leagues = res.leagues || [];
                    leagueSelect.innerHTML = '<option value="">Select League</option>'
                        + leagues.map((l) => '<option value="' + l.id + '">' + l.name + '</option>').join('');
                    if (leagues.length && !leagueSelect.value) {
                        leagueSelect.value = leagues[0].id;
                    }
                    fillCategories(res.categories || []);
                });
        }

        function loadCategories(leagueId) {
            return fetch(ROUTES.meta + '?league_id=' + encodeURIComponent(leagueId || ''), {
                headers: { 'X-Requested-With': 'XMLHttpRequest' },
            })
                .then((r) => r.json())
                .then((res) => fillCategories(res.categories || []));
        }

        // -------- tab switching (keeps the original mobile/desktop behaviour) --------
        tabs.forEach((tab) => {
            tab.addEventListener('click', () => {
                const pane = paneForTab(tab);

                if (isMobile()) {
                    const isOpen = tab.classList.contains('active');
                    panes.forEach((c) => (c.style.display = 'none'));
                    tabs.forEach((t) => t.classList.remove('active'));
                    if (!isOpen) {
                        tab.classList.add('active');
                        pane.style.display = 'block';
                        fetchTab(pane, 1);
                    }
                } else {
                    tabs.forEach((t) => t.classList.remove('active'));
                    tab.classList.add('active');
                    panes.forEach((c) => (c.style.display = 'none'));
                    pane.style.display = 'block';
                    fetchTab(pane, 1);
                }
            });
        });

        let resizeTimer;
        window.addEventListener('resize', () => {
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(() => {
                const active = activeTab();
                panes.forEach((c) => (c.style.display = 'none'));
                if (active) paneForTab(active).style.display = 'block';
            }, 150);
        });

        // -------- per-pane filter/search/pagination wiring --------
        panes.forEach((pane) => {
            const search = pane.querySelector('[data-search]');
            if (search) search.addEventListener('input', debounce(() => fetchTab(pane, 1), 350));

            pane.querySelectorAll('[data-filter]').forEach((sel) => {
                sel.addEventListener('change', () => fetchTab(pane, 1));
            });

            const pages = pane.querySelector('.pages');
            if (pages) {
                pages.addEventListener('click', (e) => {
                    const link = e.target.closest('.page');
                    if (!link) return;
                    e.preventDefault();
                    if (link.hasAttribute('data-disabled')) return;
                    const p = parseInt(link.dataset.page, 10);
                    if (p) fetchTab(pane, p);
                });
            }
        });

        // Changing the league re-scopes the category filter, then reloads.
        leagueSelect.addEventListener('change', () => {
            loadCategories(leagueSelect.value).finally(() => {
                const active = activeTab();
                if (active) fetchTab(paneForTab(active), 1);
            });
        });

        // -------- row-level dropdowns (status / category / payment / actions) --------
        function handleVisualSelect(option) {
            const dd = option.closest('.dropdown_table');
            const btn = dd.querySelector('.drop-btn');
            const selectedText = dd.querySelector('.selectedText');
            if (selectedText) selectedText.innerText = option.innerText;
            btn.classList.remove.apply(btn.classList, COLOR_CLASSES);
            const colorClass = Array.from(option.classList).find((c) => COLOR_CLASSES.indexOf(c) !== -1);
            if (colorClass) btn.classList.add(colorClass);
            dd.classList.remove('active');
        }

        const STATUS_CONFIRMED = 1;

        // Shared SweetAlert defaults so every dialog matches the dark admin theme.
        function swalOpts(opts) {
            return Object.assign({
                background: '#0f0f0f',
                color: '#fff',
                confirmButtonColor: '#7B61FF',
                cancelButtonColor: '#333',
            }, opts);
        }

        function swalToast(icon, title) {
            if (typeof Swal === 'undefined') return;
            Swal.fire(swalOpts({
                toast: true, position: 'top-end', icon: icon, title: title,
                showConfirmButton: false, timer: 2200, timerProgressBar: true,
            }));
        }

        // Paint the status pill after a successful change (mirrors the old inline logic).
        function applyStatusVisual(dd, btn, option, text) {
            const selectedText = dd.querySelector('.selectedText');
            if (selectedText) selectedText.textContent = text;
            btn.classList.remove.apply(btn.classList, COLOR_CLASSES);
            Array.from(option.classList)
                .filter((c) => c && c !== 'option')
                .forEach((c) => btn.classList.add(c));
        }

        // Paint the category pill in the same row after assigning a category.
        function applyCategoryVisual(catDd, categoryId) {
            if (!catDd) return;
            const opt = catDd.querySelector('.option[data-value="' + categoryId + '"]');
            const selectedText = catDd.querySelector('.selectedText');
            if (opt && selectedText) selectedText.textContent = opt.textContent.trim();
            catDd.querySelectorAll('.option').forEach((o) => o.classList.remove('selected'));
            if (opt) opt.classList.add('selected');
        }

        function handleStatusSelect(option) {
            const dd = option.closest('.status-dropdown');
            const btn = dd.querySelector('.drop-btn');
            const id = btn.dataset.id;
            const status = Number(option.dataset.value);
            const statusText = option.textContent.trim();
            dd.classList.remove('active');

            if (!id || Number.isNaN(status)) return;

            if (status === STATUS_CONFIRMED) {
                confirmWithCategory(option, dd, btn, id);
            } else {
                confirmStatusChange(option, dd, btn, id, status, statusText);
            }
        }

        // Non-confirmed statuses: a simple Yes/No confirmation before saving.
        function confirmStatusChange(option, dd, btn, id, status, statusText) {
            if (typeof Swal === 'undefined') {
                if (!window.confirm('Set status to "' + statusText + '"?')) return;
                return saveStatus(option, dd, btn, id, status, statusText);
            }
            Swal.fire(swalOpts({
                title: 'Update status?',
                html: 'Set this registration to <b>' + statusText + '</b>?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Yes, update',
                cancelButtonText: 'Cancel',
            })).then((result) => {
                if (result.isConfirmed) saveStatus(option, dd, btn, id, status, statusText);
            });
        }

        function saveStatus(option, dd, btn, id, status, statusText) {
            return postJson(ROUTES.updateStatus, { id: id, status: status })
                .then(() => {
                    applyStatusVisual(dd, btn, option, statusText);
                    swalToast('success', 'Status updated');
                })
                .catch((msg) => notify(msg || 'Unable to update status.'));
        }

        // Confirming a player first asks the admin to assign a category, then
        // saves the category and the Confirmed status together.
        function confirmWithCategory(option, dd, btn, id) {
            const row = dd.closest('tr');
            const catDd = row ? row.querySelector('.category-dropdown') : null;
            const catOptions = catDd
                ? Array.from(catDd.querySelectorAll('.dropdown-menu .option')).filter((o) => o.dataset.value)
                : [];

            if (!catOptions.length) {
                notify('No categories are available for this league. Add a category first.');
                return;
            }

            const selectedOpt = catDd.querySelector('.option.selected');
            const currentId = selectedOpt ? (selectedOpt.dataset.value || '') : '';

            if (typeof Swal === 'undefined') {
                const val = window.prompt('Enter category id to assign:', currentId || '');
                if (!val) return;
                return saveCategoryThenConfirm(option, dd, btn, catDd, id, val);
            }

            const selectHtml = '<select id="swalCategory" class="swal_select">'
                + '<option value="">Select a category…</option>'
                + catOptions.map((o) => '<option value="' + o.dataset.value + '"'
                    + (o.dataset.value === currentId ? ' selected' : '') + '>'
                    + o.textContent.trim() + '</option>').join('')
                + '</select>';

            Swal.fire(swalOpts({
                title: 'Assign Category',
                html: '<p style="margin:0 0 10px;color:#94A3B8;font-size:14px">'
                    + 'Assign a category before confirming this player.</p>' + selectHtml,
                showCancelButton: true,
                confirmButtonText: 'Assign & Confirm',
                cancelButtonText: 'Cancel',
                focusConfirm: false,
                preConfirm: () => {
                    const val = document.getElementById('swalCategory').value;
                    if (!val) {
                        Swal.showValidationMessage('Please select a category');
                        return false;
                    }
                    return val;
                },
            })).then((result) => {
                if (result.isConfirmed && result.value) {
                    saveCategoryThenConfirm(option, dd, btn, catDd, id, result.value);
                }
            });
        }

        function saveCategoryThenConfirm(option, dd, btn, catDd, id, categoryId) {
            return postJson(ROUTES.updateCategory, { id: id, category: Number(categoryId) })
                .then((res) => {
                    applyCategoryVisual(catDd, categoryId);
                    applyBasePrice(catDd, res && res.base_price);
                    return postJson(ROUTES.updateStatus, { id: id, status: STATUS_CONFIRMED });
                })
                .then(() => {
                    applyStatusVisual(dd, btn, option, 'Confirmed');
                    swalToast('success', 'Player confirmed');
                })
                .catch((msg) => notify(msg || 'Unable to confirm player.'));
        }

        function handleDelete(option) {
            const type = option.dataset.type;
            const id = option.dataset.id;
            const item = option.closest('.item');
            if (item) item.classList.remove('active', 'drop-up');

            if (!type || !id) return;
            if (!window.confirm('Delete this record? It can be restored later.')) return;

            postJson(ROUTES.delete, { type: type, id: id })
                .then((res) => {
                    if (typeof showAdminToast === 'function') {
                        showAdminToast((res && res.message) || 'Record deleted successfully.', 'success');
                    }
                    if (typeof window.reloadUsersTable === 'function') window.reloadUsersTable();
                })
                .catch((msg) => notify(msg || 'Unable to delete record.'));
        }

        // Refresh the row's "Base ICL Coins" cell after a category assignment
        // (the backend derives base_price from the category's base points).
        function applyBasePrice(fromEl, basePrice) {
            if (basePrice === undefined || basePrice === null) return;
            const row = fromEl.closest('tr');
            const cell = row ? row.querySelector('.base-price-cell') : null;
            if (cell) cell.textContent = basePrice;
        }

        // Team Owners tab: a plain confirm-then-save dropdown, independent of
        // the player status flow above (different endpoint, no category step).
        function handleTeamStatusSelect(option) {
            const dd = option.closest('.team-status-dropdown');
            const btn = dd.querySelector('.drop-btn');
            const url = btn.dataset.statusUrl;
            const statusId = Number(option.dataset.value);
            const statusText = option.textContent.trim();
            const color = option.dataset.color || '#F59E0B';
            dd.classList.remove('active');

            if (!url || Number.isNaN(statusId)) return;
            if (String(btn.dataset.current) === String(statusId)) return;

            Swal.fire(swalOpts({
                title: 'Update status?',
                html: 'Set this team owner to <b>' + statusText + '</b>?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Yes, update',
                cancelButtonText: 'Cancel',
            })).then((result) => {
                if (result.isConfirmed) saveTeamStatus(dd, btn, url, statusId, statusText, color);
            });
        }

        function saveTeamStatus(dd, btn, url, statusId, statusText, color) {
            return postJson(url, { status: statusId })
                .then((res) => {
                    // The owner is also a registered player with no category yet.
                    // Assign a category first (it sets the base price), then the
                    // approval is retried — the status hasn't changed on the server.
                    if (res && res.needs_category) {
                        promptOwnerCategory(dd, btn, url, statusId, statusText, color, res);
                        return;
                    }

                    const selectedText = dd.querySelector('.selectedText');
                    if (selectedText) selectedText.textContent = statusText;
                    btn.dataset.current = statusId;
                    btn.style.borderColor = color + '55';
                    btn.style.backgroundColor = color + '1A';
                    btn.style.color = color;
                    dd.querySelectorAll('.option').forEach((o) => o.classList.remove('selected'));
                    const opt = dd.querySelector('.option[data-value="' + statusId + '"]');
                    if (opt) opt.classList.add('selected');

                    if (res && res.owner_is_player) {
                        const row = dd.closest('tr');
                        if (row) {
                            const totalCell = row.querySelector('.total-budget-cell');
                            if (totalCell) totalCell.textContent = formatBudgetNumber(res.total_budget);
                            const remainingCell = row.querySelector('.remaining-budget-cell');
                            if (remainingCell) {
                                remainingCell.innerHTML = '<span style="color: #7B61FF;">' + formatBudgetNumber(res.remaining_budget) + '</span>';
                            }
                            const boughtCell = row.querySelector('.players-bought-cell');
                            if (boughtCell && res.players_bought != null) {
                                boughtCell.textContent = res.max_players ? (res.players_bought + '/' + res.max_players) : String(res.players_bought);
                            }
                        }
                        showReservePlayerNotice(res.reserve_deduction);
                    } else {
                        swalToast('success', 'Status updated');
                    }
                })
                .catch((msg) => notify(msg || 'Unable to update status.'));
        }

        // Team owner is also a player without a category. Ask the admin to pick
        // one (options come from the backend), assign it, then retry approval.
        function promptOwnerCategory(dd, btn, url, statusId, statusText, color, info) {
            const cats = (info && info.categories) || [];
            const regId = info && info.player_registration_id;

            if (!regId) {
                notify('This owner is also a player, but their registration was not found. Assign a category from the Players tab first.');
                return;
            }
            if (!cats.length) {
                notify('No categories are available for this league. Add a category first.');
                return;
            }

            const optionsHtml = cats.map((c) => '<option value="' + c.id + '">' + c.name
                + (c.base_points != null ? ' (' + c.base_points + ')' : '') + '</option>').join('');

            if (typeof Swal === 'undefined') {
                const val = window.prompt('Enter category id to assign to ' + (info.player_name || 'this player') + ':', '');
                if (!val) return;
                return assignOwnerCategoryThenApprove(dd, btn, url, statusId, statusText, color, regId, val);
            }

            const selectHtml = '<select id="swalOwnerCategory" class="swal_select">'
                + '<option value="">Select a category…</option>' + optionsHtml + '</select>';

            Swal.fire(swalOpts({
                title: 'Assign Category',
                html: '<p style="margin:0 0 10px;color:#94A3B8;font-size:14px">'
                    + (info.player_name ? ('<b>' + info.player_name + '</b> is also a player. ') : 'This owner is also a player. ')
                    + 'Assign a category before approving.</p>' + selectHtml,
                showCancelButton: true,
                confirmButtonText: 'Assign & Approve',
                cancelButtonText: 'Cancel',
                focusConfirm: false,
                preConfirm: () => {
                    const val = document.getElementById('swalOwnerCategory').value;
                    if (!val) {
                        Swal.showValidationMessage('Please select a category');
                        return false;
                    }
                    return val;
                },
            })).then((result) => {
                if (result.isConfirmed && result.value) {
                    assignOwnerCategoryThenApprove(dd, btn, url, statusId, statusText, color, regId, result.value);
                }
            });
        }

        function assignOwnerCategoryThenApprove(dd, btn, url, statusId, statusText, color, regId, categoryId) {
            return postJson(ROUTES.updateCategory, { id: regId, category: Number(categoryId) })
                .then(() => saveTeamStatus(dd, btn, url, statusId, statusText, color))
                .catch((msg) => notify(msg || 'Unable to assign category.'));
        }

        function formatBudgetNumber(value) {
            const num = Number(value) || 0;
            return num.toLocaleString('en-US', { maximumFractionDigits: 0 });
        }

        // Shown when an approved team owner is also registered as a player:
        // their player base price * 5 is deducted from the team budget as
        // the squad's Reserve Category weighting.
        function showReservePlayerNotice(deduction) {
            if (typeof Swal === 'undefined') return;
            const amount = formatBudgetNumber(deduction);
            Swal.fire(swalOpts({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 6000,
                timerProgressBar: true,
                html: '<div style="display:flex;align-items:stretch;gap:12px;text-align:left;">' +
                    '<div style="flex:0 0 48px;display:flex;align-items:center;justify-content:center;' +
                    'border-radius:8px;background:linear-gradient(180deg,#8B5CF6,#4C1D95);padding:8px;">' +
                    '<svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">' +
                    '<circle cx="12" cy="8" r="3.2" stroke="#fff" stroke-width="1.4"/>' +
                    '<path d="M5.5 20c0-3.6 2.9-6.2 6.5-6.2s6.5 2.6 6.5 6.2" stroke="#fff" stroke-width="1.4" stroke-linecap="round"/>' +
                    '<path d="M9.5 13.8 12 16l2.5-2.2" stroke="#fff" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>' +
                    '</svg>' +
                    '</div>' +
                    '<div style="font-size:13px;line-height:1.35;">Business owner participating as a player will be ' +
                    'counted in a squad Reserve Category &times; 5 times.<br>' +
                    (deduction != null ? '<b>' + amount + '</b> points deducted from the team budget.' : '') +
                    '</div>' +
                    '</div>',
            }));
        }

        function handleSponsorStatusSelect(option) {
            const dd = option.closest('.sponsor-status-dropdown');
            const btn = dd.querySelector('.drop-btn');
            const url = btn.dataset.statusUrl;
            const statusId = Number(option.dataset.value);
            const statusText = option.textContent.trim();
            const color = option.dataset.color || '#F59E0B';
            dd.classList.remove('active');

            if (!url || Number.isNaN(statusId)) return;
            if (String(btn.dataset.current) === String(statusId)) return;

            Swal.fire(swalOpts({
                title: 'Update sponsor status?',
                html: 'Set this sponsor to <b>' + statusText + '</b>?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Yes, update',
                cancelButtonText: 'Cancel',
            })).then((result) => {
                if (result.isConfirmed) saveSponsorStatus(dd, btn, url, statusId, statusText, color);
            });
        }

        function saveSponsorStatus(dd, btn, url, statusId, statusText, color) {
            return postJson(url, { status: statusId })
                .then(() => {
                    const selectedText = dd.querySelector('.selectedText');
                    if (selectedText) selectedText.textContent = statusText;
                    btn.dataset.current = statusId;
                    btn.style.borderColor = color + '55';
                    btn.style.backgroundColor = color + '1A';
                    btn.style.color = color;
                    dd.querySelectorAll('.option').forEach((o) => o.classList.remove('selected'));
                    const opt = dd.querySelector('.option[data-value="' + statusId + '"]');
                    if (opt) opt.classList.add('selected');
                    swalToast('success', 'Sponsor status updated');
                })
                .catch((msg) => notify(msg || 'Unable to update sponsor status.'));
        }

        function handleCategorySelect(option) {
            if (option.classList.contains('disabled')) return;
            const dd = option.closest('.category-dropdown');
            const btn = dd.querySelector('.drop-btn');
            const id = btn.dataset.id;
            const category = Number(option.dataset.value);
            const selectedText = option.textContent.trim();

            if (!id || Number.isNaN(category)) { dd.classList.remove('active'); return; }

            postJson(ROUTES.updateCategory, { id: id, category: category })
                .then((res) => {
                    dd.querySelector('.selectedText').textContent = selectedText;
                    dd.querySelectorAll('.option').forEach((o) => o.classList.remove('selected'));
                    option.classList.add('selected');
                    applyBasePrice(dd, res && res.base_price);
                })
                .catch((msg) => notify(msg || 'Unable to update category.'))
                .finally(() => dd.classList.remove('active'));
        }

        // Single delegated click handler so it also covers dynamically injected rows.
        document.addEventListener('click', (e) => {
            const scope = e.target.closest('.users_list');

            // Row action menu (three-dots)
            const moreBtn = e.target.closest('.users_list .item .more-btn');
            if (moreBtn) {
                e.preventDefault();
                e.stopPropagation();
                const item = moreBtn.closest('.item');
                document.querySelectorAll('.users_list .item').forEach((i) => {
                    if (i !== item) i.classList.remove('active', 'drop-up');
                });
                item.classList.toggle('active');
                const menu = item.querySelector('.dropdown-menu');
                if (menu) {
                    const spaceBelow = window.innerHeight - moreBtn.getBoundingClientRect().bottom;
                    item.classList.toggle('drop-up', spaceBelow < menu.getBoundingClientRect().height + 20);
                }
                return;
            }

            // Delete (soft delete) a record from the current tab.
            const delOpt = e.target.closest('.users_list td.item .option.delete-record');
            if (delOpt) {
                e.preventDefault();
                e.stopPropagation();
                handleDelete(delOpt);
                return;
            }

            // Disabled / hint items (registrations with no player profile) — inert, keep menu open.
            const deadOpt = e.target.closest('.users_list td.item .option.disabled, .users_list td.item .option.hint');
            if (deadOpt) { e.preventDefault(); e.stopPropagation(); return; }

            const statusOpt = e.target.closest('.users_list .status-dropdown .option');
            if (statusOpt) { e.preventDefault(); e.stopPropagation(); handleStatusSelect(statusOpt); return; }

            const catOpt = e.target.closest('.users_list .category-dropdown .option');
            if (catOpt) { e.preventDefault(); e.stopPropagation(); handleCategorySelect(catOpt); return; }

            const teamStatusOpt = e.target.closest('.users_list .team-status-dropdown .option');
            if (teamStatusOpt) { e.preventDefault(); e.stopPropagation(); handleTeamStatusSelect(teamStatusOpt); return; }

            const sponsorStatusOpt = e.target.closest('.users_list .sponsor-status-dropdown .option');
            if (sponsorStatusOpt) { e.preventDefault(); e.stopPropagation(); handleSponsorStatusSelect(sponsorStatusOpt); return; }

            const opt = e.target.closest('.users_list .dropdown_table .option');
            if (opt) { e.preventDefault(); e.stopPropagation(); handleVisualSelect(opt); return; }

            const dropBtn = e.target.closest('.users_list .dropdown_table .drop-btn');
            if (dropBtn) {
                e.preventDefault();
                e.stopPropagation();
                const dd = dropBtn.closest('.dropdown_table');
                document.querySelectorAll('.users_list .dropdown_table').forEach((d) => {
                    if (d !== dd) d.classList.remove('active');
                });
                dd.classList.toggle('active');
                return;
            }

            // Top filter dropdowns (All Status / All Categories)
            const filterOpt = e.target.closest('.users_list .filter-dropdown .filter-option');
            if (filterOpt) {
                e.preventDefault();
                e.stopPropagation();
                selectFilterOption(filterOpt.closest('.filter-dropdown'), filterOpt, true);
                return;
            }

            const filterTrigger = e.target.closest('.users_list .filter-dropdown .filter-trigger');
            if (filterTrigger) {
                e.preventDefault();
                e.stopPropagation();
                const dd = filterTrigger.closest('.filter-dropdown');
                document.querySelectorAll('.users_list .filter-dropdown').forEach((d) => {
                    if (d !== dd) d.classList.remove('open');
                });
                dd.classList.toggle('open');
                return;
            }

            // Click anywhere else closes open menus.
            if (!scope || !e.target.closest('.dropdown_table')) {
                document.querySelectorAll('.users_list .dropdown_table').forEach((d) => d.classList.remove('active'));
            }
            if (!scope || !e.target.closest('.item')) {
                document.querySelectorAll('.users_list .item').forEach((i) => i.classList.remove('active', 'drop-up'));
            }
            if (!scope || !e.target.closest('.filter-dropdown')) {
                document.querySelectorAll('.users_list .filter-dropdown').forEach((d) => d.classList.remove('open'));
            }
        });

        // Reload the currently visible tab (used after an edit is saved).
        window.reloadUsersTable = function () {
            const active = activeTab();
            if (!active) return;
            const pane = paneForTab(active);
            const pages = pane.querySelector('.pages');
            const page = pages && pages.dataset.page ? parseInt(pages.dataset.page, 10) : 1;
            fetchTab(pane, page || 1);
        };

        // -------- init --------
        loadMeta().finally(() => {
            fetchTab(document.getElementById('players'), 1);
        });
    })();
</script>

<script>
    // -------- Player details modal --------
    (function () {
        const modal = document.getElementById('playerModal');
        const body = document.getElementById('playerModalBody');
        if (!modal || !body) return;

        const LOADING = '<div class="modal-loading">Loading details…</div>';

        function openModal() {
            modal.classList.add('open');
            modal.setAttribute('aria-hidden', 'false');
            document.body.style.overflow = 'hidden';
        }

        function closeModal() {
            modal.classList.remove('open');
            modal.setAttribute('aria-hidden', 'true');
            document.body.style.overflow = '';
            body.innerHTML = LOADING;
        }

        // Enable the Batting/Bowling/Fielding tabs inside the loaded partial.
        function wireTabs() {
            const root = body.querySelector('.player_detail');
            if (!root) return;
            root.querySelectorAll('.tabs .tab').forEach((tab) => {
                tab.addEventListener('click', () => {
                    root.querySelectorAll('.tabs .tab').forEach((t) => t.classList.remove('active'));
                    root.querySelectorAll('.tab_pane').forEach((p) => p.classList.remove('active'));
                    tab.classList.add('active');
                    const pane = root.querySelector('.tab_pane[data-pane="' + tab.dataset.tab + '"]');
                    if (pane) pane.classList.add('active');
                });
            });
        }

        function loadDetail(url) {
            body.innerHTML = LOADING;
            openModal();
            fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                .then((r) => {
                    if (!r.ok) throw new Error('Failed to load details.');
                    return r.text();
                })
                .then((html) => { body.innerHTML = html; wireTabs(); })
                .catch(() => {
                    body.innerHTML = '<div class="modal-loading">Unable to load details.</div>';
                });
        }

        // Open on "View" click (delegated — rows are injected dynamically).
        // Works for players, sponsors and team owners via each row's data-url.
        document.addEventListener('click', (e) => {
            const view = e.target.closest('.view-detail');
            if (view) {
                e.preventDefault();
                e.stopPropagation();
                const url = view.dataset.url;
                if (url) loadDetail(url);
                return;
            }

            // Close when clicking the backdrop or the close button.
            if (e.target === modal || e.target.closest('[data-close-modal]')) {
                closeModal();
            }
        });

        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && modal.classList.contains('open')) closeModal();
        });
    })();
</script>

<script>
    // -------- Edit modal (player / team owner / sponsor) --------
    (function () {
        const modal = document.getElementById('editModal');
        const body = document.getElementById('editModalBody');
        if (!modal || !body) return;

        const CSRF = "{{ csrf_token() }}";
        const LOADING = '<div class="modal-loading">Loading…</div>';

        function openModal() {
            modal.classList.add('open');
            modal.setAttribute('aria-hidden', 'false');
            document.body.style.overflow = 'hidden';
        }

        function closeModal() {
            modal.classList.remove('open');
            modal.setAttribute('aria-hidden', 'true');
            document.body.style.overflow = '';
            body.innerHTML = LOADING;
        }

        function toast(message, type) {
            if (typeof showAdminToast === 'function') {
                showAdminToast(message, type || 'success');
            } else if (type === 'error') {
                alert(message);
            }
        }

        function loadForm(url) {
            body.innerHTML = LOADING;
            openModal();
            fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                .then((r) => {
                    if (!r.ok) throw new Error('Failed to load form.');
                    return r.text();
                })
                .then((html) => { body.innerHTML = html; })
                .catch(() => {
                    body.innerHTML = '<div class="modal-loading">Unable to load edit form.</div>';
                });
        }

        function submitForm(form) {
            const action = form.dataset.action;
            if (!action) return;

            const submitBtn = form.querySelector('button[type="submit"]');
            if (submitBtn) { submitBtn.disabled = true; submitBtn.textContent = 'Saving…'; }

            fetch(action, {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': CSRF,
                },
                body: new FormData(form),
            })
                .then(async (r) => {
                    const data = await r.json().catch(() => ({}));
                    if (!r.ok) {
                        throw (data.message
                            || (data.errors ? Object.values(data.errors).flat().join('\n') : null)
                            || 'Unable to save changes.');
                    }
                    return data;
                })
                .then((data) => {
                    toast(data.message || 'Saved successfully.', 'success');
                    closeModal();
                    if (typeof window.reloadUsersTable === 'function') window.reloadUsersTable();
                })
                .catch((msg) => {
                    toast(typeof msg === 'string' ? msg : 'Unable to save changes.', 'error');
                    if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = 'Save Changes'; }
                });
        }

        // Open on "Edit" click (delegated — rows are injected dynamically).
        document.addEventListener('click', (e) => {
            const edit = e.target.closest('.edit-detail');
            if (edit) {
                e.preventDefault();
                e.stopPropagation();
                const url = edit.dataset.url;
                if (url) loadForm(url);
                return;
            }

            // Close on backdrop, close button or Cancel button.
            if (e.target === modal || e.target.closest('[data-close-edit]')
                || (modal.contains(e.target) && e.target.closest('[data-close-modal]'))) {
                closeModal();
            }
        });

        // Submit (delegated — the form lives inside the injected partial).
        modal.addEventListener('submit', (e) => {
            const form = e.target.closest('.edit_form');
            if (!form) return;
            e.preventDefault();
            submitForm(form);
        });

        // -------- Popularity-skill chips + repeatable rows (injected markup) --------
        function addSkillChip(select, id, name) {
            const box = select.parentElement.querySelector('[data-skills-chips]');
            if (!box || box.querySelector('.chip[data-id="' + id + '"]')) return;

            const chip = document.createElement('span');
            chip.className = 'chip';
            chip.dataset.id = id;
            chip.appendChild(document.createTextNode(name + ' '));

            const x = document.createElement('button');
            x.type = 'button';
            x.className = 'chip_x';
            x.setAttribute('data-remove-skill', '');
            x.setAttribute('aria-label', 'Remove');
            x.innerHTML = '&times;';

            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'popularity_skills[]';
            input.value = id;

            chip.appendChild(x);
            chip.appendChild(input);
            box.appendChild(chip);
        }

        function addRepeatRow(button) {
            const key = button.dataset.add;
            const form = button.closest('.edit_form');
            const list = form.querySelector('.repeat_list[data-repeat="' + key + '"]');
            const tpl = form.querySelector('template[data-tpl="' + key + '"]');
            if (!list || !tpl) return;

            const idx = parseInt(list.dataset.nextIndex || '0', 10);
            list.dataset.nextIndex = idx + 1;

            const tmp = document.createElement('div');
            tmp.innerHTML = tpl.innerHTML.replace(/__IDX__/g, idx).trim();
            const row = tmp.firstElementChild;
            if (row) list.appendChild(row);
        }

        // Show/hide the free-text input for the "Other" popularity skill.
        function syncOtherSkill(group) {
            if (!group) return;
            const otherId = group.dataset.otherId;
            const box = group.querySelector('[data-skill-other]');
            if (!otherId || !box) return;
            const active = !!group.querySelector('.chip[data-id="' + otherId + '"]');
            box.style.display = active ? '' : 'none';
            if (!active) {
                const input = box.querySelector('input');
                if (input) input.value = '';
            }
        }

        modal.addEventListener('change', (e) => {
            // Live preview when a new profile image is chosen.
            const avatarInput = e.target.closest('[data-avatar-input]');
            if (avatarInput) {
                const file = avatarInput.files && avatarInput.files[0];
                const wrap = avatarInput.closest('[data-avatar]') || avatarInput.closest('.pe_avatar');
                const img = wrap ? wrap.querySelector('[data-avatar-preview]') : null;
                if (file && img) img.src = URL.createObjectURL(file);
                return;
            }

            const sel = e.target.closest('[data-skills-select]');
            if (!sel || !sel.value) return;
            const opt = sel.options[sel.selectedIndex];
            addSkillChip(sel, sel.value, opt.dataset.name || opt.textContent.trim());
            opt.disabled = true;
            sel.value = '';
            syncOtherSkill(sel.closest('[data-skills]'));
        });

        modal.addEventListener('click', (e) => {
            const rmSkill = e.target.closest('[data-remove-skill]');
            if (rmSkill) {
                const chip = rmSkill.closest('.chip');
                const group = chip.closest('.form_group');
                const sel = group ? group.querySelector('[data-skills-select]') : null;
                const opt = sel ? sel.querySelector('option[value="' + chip.dataset.id + '"]') : null;
                if (opt) opt.disabled = false;
                chip.remove();
                syncOtherSkill(group ? group.closest('[data-skills]') || group : null);
                return;
            }

            const addBtn = e.target.closest('[data-add]');
            if (addBtn) { addRepeatRow(addBtn); return; }

            const rmRow = e.target.closest('[data-remove-row]');
            if (rmRow) {
                const row = rmRow.closest('.repeat_row');
                if (row) row.remove();
                return;
            }
        });

        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && modal.classList.contains('open')) closeModal();
        });
    })();
</script>

<script>
    // -------- Profile image lightbox --------
    (function () {
        const lightbox = document.getElementById('imageLightbox');
        const img = document.getElementById('imageLightboxImg');
        if (!lightbox || !img) return;

        function open(src, alt) {
            img.src = src;
            img.alt = alt || 'Profile image';
            lightbox.classList.add('open');
            lightbox.setAttribute('aria-hidden', 'false');
            document.body.style.overflow = 'hidden';
        }

        function close() {
            lightbox.classList.remove('open');
            lightbox.setAttribute('aria-hidden', 'true');
            document.body.style.overflow = '';
            img.src = '';
        }

        // Delegated — rows are injected dynamically by the datatable fetch.
        document.addEventListener('click', (e) => {
            const avatar = e.target.closest('.users_list .avatar img');
            if (avatar) {
                e.preventDefault();
                e.stopPropagation();
                // currentSrc reflects the placeholder when the original 404s.
                open(avatar.currentSrc || avatar.src, avatar.alt);
                return;
            }

            if (e.target === lightbox || e.target.closest('[data-close-lightbox]')) close();
        });

        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && lightbox.classList.contains('open')) close();
        });
    })();
</script>
@endpush