@php
    use App\Models\PopularitySkill;

    $selectedSkillIds = $player->popularitySkills->pluck('id')->all();
    $otherSkillId = PopularitySkill::OTHER;
    $otherSelected = in_array($otherSkillId, $selectedSkillIds, true);
    $otherText = optional($player->popularitySkills->firstWhere('id', $otherSkillId))->pivot->other_text ?? '';
    $player_image = $player && $player->profile_image
                    ? $player->profileImageUrl()
                    : ($player->user?->profileImageUrl() ?? placeholder_image_url('player'));
@endphp

<form class="edit_form player_edit_form" data-action="{{ route('admin.users.players.update', $player->id) }}">
    <h3 class="edit_title">Edit Player — {{ $player->fullName() }}</h3>

    {{-- AVATAR (click to change, live preview) --}}
    <div class="pe_avatar_wrap">
        <label class="pe_avatar" for="pe_profile_image" data-avatar title="Change profile image">
            <img src="{{ $player_image }}" alt="{{ $player->fullName() }}" data-avatar-preview>
            <span class="pe_avatar_edit" aria-hidden="true">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
            </span>
            <input type="file" id="pe_profile_image" name="profile_image" accept="image/*" data-avatar-input hidden>
        </label>
    </div>

    {{-- PERSONAL / ROLE --}}
    <div class="form_section">
        <div class="form_grid">
            <div class="form_group">
                <label>First Name *</label>
                <input type="text" name="first_name" value="{{ $player->first_name }}" placeholder="First Name" required>
            </div>
            <div class="form_group">
                <label>Last Name</label>
                <input type="text" name="last_name" value="{{ $player->last_name }}" placeholder="Last Name">
            </div>
        </div>

        @php
            $playerMobile = trim(($player->user?->country_code ? $player->user->country_code . ' ' : '') . ($player->user?->mobile ?? ''));
        @endphp
        <div class="form_group full">
            <label>Mobile Number</label>
            <input type="text" value="{{ $playerMobile !== '' ? $playerMobile : '—' }}" placeholder="Not provided" readonly>
        </div>

        <div class="form_group full">
            <label>Player Role</label>
            <select name="player_role_id">
                <option value="">Select Player Role</option>
                @foreach ($roles as $role)
                    <option value="{{ $role->id }}" @selected((int) $player->player_role_id === $role->id)>{{ $role->name }}</option>
                @endforeach
            </select>
        </div>

        <div class="form_group full">
            <label>Batting Style</label>
            <select name="batting_style_id">
                <option value="">Select Batting Style</option>
                @foreach ($battingStyles as $style)
                    <option value="{{ $style->id }}" @selected((int) $player->batting_style_id === $style->id)>{{ $style->display_name ?? $style->name }}</option>
                @endforeach
            </select>
        </div>

        <div class="form_group full">
            <label>Bowling Style</label>
            <select name="bowling_style_id">
                <option value="">Select Bowling Style</option>
                @foreach ($bowlingStyles as $style)
                    <option value="{{ $style->id }}" @selected((int) $player->bowling_style_id === $style->id)>{{ $style->display_name ?? $style->name }}</option>
                @endforeach
            </select>
        </div>

        {{-- POPULARITY SKILLS (multi-select as chips) --}}
        <div class="form_group full" data-skills data-other-id="{{ $otherSkillId }}">
            <label>Popularity Skills</label>
            <select class="skills_select" data-skills-select>
                <option value="">Select Popularity Skill</option>
                @foreach ($popularitySkills as $skill)
                    <option value="{{ $skill->id }}" data-name="{{ $skill->name }}" @disabled(in_array($skill->id, $selectedSkillIds, true))>{{ $skill->name }}</option>
                @endforeach
            </select>
            <div class="chips" data-skills-chips>
                @foreach ($player->popularitySkills as $sk)
                    <span class="chip" data-id="{{ $sk->id }}">
                        {{ $sk->name }}
                        <button type="button" class="chip_x" data-remove-skill aria-label="Remove">&times;</button>
                        <input type="hidden" name="popularity_skills[]" value="{{ $sk->id }}">
                    </span>
                @endforeach
            </div>

            {{-- Shown only when the "Other" skill is selected --}}
            <div class="skill_other" data-skill-other @style(['display:none' => !$otherSelected])>
                <input type="text" name="popularity_skill_other" maxlength="100"
                       placeholder="Enter your skill" value="{{ $otherText }}">
            </div>
        </div>

        {{-- BASE PRICE --}}
        <div class="form_group full">
            <label>Base Price (Point)</label>
            <div class="input_suffix">
                <input type="number" step="0.01" min="0" name="base_price" value="{{ $player->base_price }}" placeholder="10,000">
                <span class="suffix">Points Money</span>
            </div>
        </div>
    </div>

    {{-- SOCIAL INFORMATION --}}
    <div class="form_section">
        <h4 class="social_title">Social Information</h4>

        <div class="form_group full">
            <label>Instagram Reach</label>
            <input type="text" name="instagram_reach" value="{{ $player->instagram_reach }}" placeholder="https://www.instagram.com/your">
        </div>
        <div class="form_group full">
            <label>Facebook Reach</label>
            <input type="text" name="facebook_reach" value="{{ $player->facebook_reach }}" placeholder="https://www.facebook.com/your">
        </div>
        <div class="form_group full">
            <label>TikTok Reach</label>
            <input type="text" name="tiktok_reach" value="{{ $player->tiktok_reach }}" placeholder="https://www.tiktok.com/your">
        </div>

        <div class="form_group full">
            <label>Instagram Followers</label>
            <input type="text" name="instagram_followers" value="{{ $player->instagram_followers }}" maxlength="50" placeholder="48.2K">
        </div>
        <div class="form_group full">
            <label>Facebook Followers</label>
            <input type="text" name="facebook_followers" value="{{ $player->facebook_followers }}" maxlength="50" placeholder="12.5K">
        </div>
        <div class="form_group full">
            <label>TikTok Followers</label>
            <input type="text" name="tiktok_followers" value="{{ $player->tiktok_followers }}" maxlength="50" placeholder="102K">
        </div>
    </div>

    {{-- PERFORMANCES (repeatable) --}}
    <div class="form_section">
        <div class="section_head">
            <h4>Performances</h4>
            <button type="button" class="add_row" data-add="performances">+ Add Performance</button>
        </div>
        <div class="repeat_list" data-repeat="performances" data-next-index="{{ $player->performances->count() }}">
            @foreach ($player->performances as $i => $perf)
                <div class="repeat_row">
                    <input type="hidden" name="performances[{{ $i }}][id]" value="{{ $perf->id }}">
                    <div class="form_grid">
                        <div class="form_group">
                            <label>Match Played</label>
                            <input type="text" name="performances[{{ $i }}][match_description]" value="{{ $perf->match_description }}" placeholder="e.g. vs Mumbai XI">
                        </div>
                        <div class="form_group">
                            <label>Runs Scored</label>
                            <input type="number" min="0" name="performances[{{ $i }}][runs_scored]" value="{{ $perf->runs_scored }}">
                        </div>
                        <div class="form_group">
                            <label>Wickets Taken</label>
                            <input type="number" min="0" name="performances[{{ $i }}][wickets_taken]" value="{{ $perf->wickets_taken }}">
                        </div>
                        <div class="form_group">
                            <label>Fielding Catches</label>
                            <input type="number" min="0" name="performances[{{ $i }}][catches]" value="{{ $perf->catches }}">
                        </div>
                    </div>
                    <div class="repeat_row_foot">
                        <label class="check"><input type="checkbox" name="performances[{{ $i }}][is_best]" value="1" @checked($perf->is_best)> Best Performance</label>
                        <button type="button" class="remove_row" data-remove-row>Remove</button>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    {{-- ACHIEVEMENTS (repeatable) --}}
    <div class="form_section">
        <div class="section_head">
            <h4>Achievements</h4>
            <button type="button" class="add_row" data-add="achievements">+ Add Achievement</button>
        </div>
        <div class="repeat_list" data-repeat="achievements" data-next-index="{{ $player->achievements->count() }}">
            @foreach ($player->achievements as $i => $ach)
                <div class="repeat_row">
                    <input type="hidden" name="achievements[{{ $i }}][id]" value="{{ $ach->id }}">
                    <div class="form_grid three">
                        <div class="form_group">
                            <label>Achievement Title</label>
                            <input type="text" name="achievements[{{ $i }}][achievement_title]" value="{{ $ach->achievement_title }}" placeholder="e.g. Player of the Series">
                        </div>
                        <div class="form_group">
                            <label>Tournament Name</label>
                            <input type="text" name="achievements[{{ $i }}][tournament_name]" value="{{ $ach->tournament_name }}" placeholder="e.g. ICL 2025">
                        </div>
                        <div class="form_group">
                            <label>Achievement Year</label>
                            <input type="number" min="1900" max="{{ date('Y') + 1 }}" name="achievements[{{ $i }}][achievement_year]" value="{{ $ach->achievement_year }}" placeholder="2025">
                        </div>
                    </div>
                    <div class="repeat_row_foot">
                        <span></span>
                        <button type="button" class="remove_row" data-remove-row>Remove</button>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <div class="form_footer">
        <button type="button" class="btn_ghost" data-close-modal>Cancel</button>
        <button type="submit" class="btn_primary">Save Changes</button>
    </div>

    {{-- Templates for JS-added rows (placeholder __IDX__ replaced client-side) --}}
    <template data-tpl="performances">
        <div class="repeat_row">
            <input type="hidden" name="performances[__IDX__][id]" value="">
            <div class="form_grid">
                <div class="form_group">
                    <label>Match Played</label>
                    <input type="text" name="performances[__IDX__][match_description]" placeholder="e.g. vs Mumbai XI">
                </div>
                <div class="form_group">
                    <label>Runs Scored</label>
                    <input type="number" min="0" name="performances[__IDX__][runs_scored]">
                </div>
                <div class="form_group">
                    <label>Wickets Taken</label>
                    <input type="number" min="0" name="performances[__IDX__][wickets_taken]">
                </div>
                <div class="form_group">
                    <label>Fielding Catches</label>
                    <input type="number" min="0" name="performances[__IDX__][catches]">
                </div>
            </div>
            <div class="repeat_row_foot">
                <label class="check"><input type="checkbox" name="performances[__IDX__][is_best]" value="1"> Best Performance</label>
                <button type="button" class="remove_row" data-remove-row>Remove</button>
            </div>
        </div>
    </template>

    <template data-tpl="achievements">
        <div class="repeat_row">
            <input type="hidden" name="achievements[__IDX__][id]" value="">
            <div class="form_grid three">
                <div class="form_group">
                    <label>Achievement Title</label>
                    <input type="text" name="achievements[__IDX__][achievement_title]" placeholder="e.g. Player of the Series">
                </div>
                <div class="form_group">
                    <label>Tournament Name</label>
                    <input type="text" name="achievements[__IDX__][tournament_name]" placeholder="e.g. ICL 2025">
                </div>
                <div class="form_group">
                    <label>Achievement Year</label>
                    <input type="number" min="1900" max="{{ date('Y') + 1 }}" name="achievements[__IDX__][achievement_year]" placeholder="2025">
                </div>
            </div>
            <div class="repeat_row_foot">
                <span></span>
                <button type="button" class="remove_row" data-remove-row>Remove</button>
            </div>
        </div>
    </template>
</form>