@extends('layouts.admin.app')

@section('title', 'Add New Player')

@push('style')
<style>
    /* ============================================================
       ADD NEW PLAYER — two-step wizard, admin dark theme
       (#7B61FF purple, #A0E86F green, #2B2B2B borders)
    ============================================================ */
    .add_player { color: #fff; padding: 24px 28px; }

    .add_player .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #777; margin: 0 0 10px; }
    .add_player .breadcrumb a { color: #777; text-decoration: none; }
    .add_player .breadcrumb a:hover { color: #A0E86F; }
    .add_player .breadcrumb .active { color: #fff; }

    .add_player .page_title { font-size: 24px; font-weight: 700; margin: 0 0 20px; }

    /* ---------- step tabs ---------- */
    .ap_steps { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 22px; }
    .ap_step {
        border: 1px solid #2B2B2B;
        background: #0f0f0f;
        color: #fff;
        border-radius: 999px;
        padding: 15px 20px;
        font-size: 15px;
        font-weight: 600;
        text-align: center;
        cursor: pointer;
        transition: .2s;
    }
    .ap_step:hover { border-color: #7B61FF; }
    .ap_step.active { background: #A0E86F; border-color: #A0E86F; color: #0b0b0b; }

    /* ---------- cards ---------- */
    .ap_card { background: #101010; border: 1px solid #2B2B2B; border-radius: 16px; margin-bottom: 20px; }
    .ap_card_head { padding: 20px 24px; border-bottom: 1px solid #2B2B2B; }
    .ap_card_head h3 { margin: 0; font-size: 18px; font-weight: 700; }
    .ap_card_body { padding: 24px; }

    .ap_row { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: stretch; }

    /* ---------- avatar ---------- */
    .ap_photo { background: #101010; border: 1px solid #2B2B2B; border-radius: 16px; padding: 24px; text-align: center; }
    .ap_photo h3 { margin: 0 0 24px; font-size: 18px; font-weight: 700; }
    .ap_avatar { position: relative; display: inline-block; cursor: pointer; }
    .ap_avatar img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; background: #1a1a1a; }
    .ap_avatar_edit {
        position: absolute; right: 6px; bottom: 6px;
        width: 34px; height: 34px; border-radius: 50%;
        background: #7B61FF; color: #fff;
        display: flex; align-items: center; justify-content: center;
        border: 3px solid #101010;
    }

    /* ---------- fields ---------- */
    .ap_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 20px; }
    .ap_grid.four { grid-template-columns: repeat(4, 1fr); }
    .ap_field.full { grid-column: 1 / -1; }
    .ap_field > label { display: block; font-size: 13px; color: #9a9a9a; margin-bottom: 8px; }
    .ap_field input[type="text"],
    .ap_field input[type="number"],
    .ap_field input[type="date"],
    .ap_field select,
    .ap_field textarea {
        width: 100%;
        background: #1a1a1a;
        border: 1px solid #2B2B2B;
        border-radius: 999px;
        padding: 14px 18px;
        color: #fff;
        font-size: 14px;
        outline: none;
    }
    .ap_field textarea { border-radius: 14px; min-height: 110px; resize: vertical; }
    .ap_field input:focus, .ap_field select:focus, .ap_field textarea:focus { border-color: #7B61FF; }
    .ap_field input::placeholder, .ap_field textarea::placeholder { color: #5c5c5c; }
    .ap_field input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; }
    .ap_field select {
        appearance: none;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 18px center;
        background-size: 18px;
        padding-right: 46px;
    }
    .ap_field select option { background: #1a1a1a; }

    /* ---------- skills chips ---------- */
    .ap_chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
    .ap_chip {
        display: inline-flex; align-items: center; gap: 10px;
        background: #7B61FF; color: #fff;
        border-radius: 999px; padding: 10px 18px;
        font-size: 14px; font-weight: 500;
    }
    .ap_chip_x { background: none; border: 0; color: #fff; font-size: 16px; line-height: 1; cursor: pointer; padding: 0; opacity: .85; }
    .ap_chip_x:hover { opacity: 1; }
    .ap_skill_other { margin-top: 14px; }

    /* ---------- repeatable rows ---------- */
    .ap_repeat_row { position: relative; }
    .ap_repeat_row + .ap_repeat_row { margin-top: 18px; padding-top: 18px; border-top: 1px solid #1f1f1f; }
    .ap_add_more { background: none; border: 0; color: #A0E86F; font-size: 14px; font-weight: 500; cursor: pointer; padding: 0; margin-top: 14px; }
    .ap_add_more:hover { text-decoration: underline; }
    .ap_remove_row { background: none; border: 0; color: #f87171; font-size: 13px; cursor: pointer; padding: 0; margin-top: 10px; }
    .ap_remove_row:hover { text-decoration: underline; }

    /* ---------- footer ---------- */
    .ap_footer {
        background: #101010; border: 1px solid #2B2B2B; border-radius: 16px;
        padding: 20px 24px; display: flex; justify-content: space-between; gap: 12px;
    }
    .ap_footer .spacer { margin-right: auto; }
    .ap_btn_back {
        background: transparent; color: #fff;
        border: 1px solid #2B2B2B; border-radius: 999px;
        padding: 14px 44px; font-size: 15px; font-weight: 600; cursor: pointer;
    }
    .ap_btn_back:hover { border-color: #7B61FF; }
    .ap_btn_next {
        background: #A0E86F; color: #0b0b0b; border: 0;
        border-radius: 999px; padding: 14px 44px;
        font-size: 15px; font-weight: 700; cursor: pointer;
    }
    .ap_btn_next:hover { background: #8fd95e; }
    .ap_btn_next:disabled { opacity: .6; cursor: not-allowed; }

    /* ---------- validation ---------- */
    .add_player label.error { color: #f87171; font-size: 12px; margin: 6px 0 0 18px; display: block; font-weight: 400; }
    .add_player input.error, .add_player select.error, .add_player textarea.error { border-color: #f87171 !important; }

    @media (max-width: 1200px) { .ap_grid.four { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 992px) {
        .ap_row { grid-template-columns: 1fr; }
        .ap_grid, .ap_grid.four { grid-template-columns: 1fr; }
        .ap_steps { grid-template-columns: 1fr; }
    }
</style>
@endpush

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

    <div class="breadcrumb">
        <a href="{{ route('admin.dashboard.index') }}">Dashboard</a>
        <span>›</span>
        <a href="{{ route('admin.users.index') }}">User Management</a>
        <span>›</span>
        <span class="active">Add New Player</span>
    </div>

    <h1 class="page_title">Add New Player</h1>

    <div class="ap_steps">
        <div class="ap_step active" data-step-tab="1">1. Player Information</div>
        <div class="ap_step" data-step-tab="2">2. Key State Overview</div>
    </div>

    <form id="playerCreateForm" action="{{ route('admin.users.players.store') }}" method="POST" enctype="multipart/form-data" novalidate>
        @csrf

        {{-- ===================== STEP 1 — PLAYER INFORMATION ===================== --}}
        <div data-step="1">
            <div class="ap_row">
                <div class="ap_photo">
                    <h3>Profile Photo</h3>
                    <label class="ap_avatar" for="profile_image" title="Upload profile photo">
                        <img src="{{ placeholder_image_url('player') }}" alt="" data-avatar-preview>
                        <span class="ap_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="profile_image" name="profile_image" accept="image/*" data-avatar-input hidden>
                    </label>
                </div>

                <div class="ap_card" style="margin-bottom:0;">
                    <div class="ap_card_head"><h3>Basic Detail</h3></div>
                    <div class="ap_card_body">
                        <div class="ap_grid">
                            <div class="ap_field">
                                <label>First Name</label>
                                <input type="text" name="first_name" value="{{ old('first_name') }}" placeholder="First Name">
                            </div>
                            <div class="ap_field">
                                <label>Last Name</label>
                                <input type="text" name="last_name" value="{{ old('last_name') }}" placeholder="Last Name">
                            </div>
                            <div class="ap_field">
                                <label>Base Price (BID)</label>
                                <input type="number" step="0.01" min="0" name="base_price" value="{{ old('base_price') }}" placeholder="10,000">
                            </div>

                            <div class="ap_field">
                                <label>League</label>
                                <select name="league_id">
                                    <option value="">Select League</option>
                                    @foreach ($leagues as $league)
                                        <option value="{{ $league->id }}" @selected(old('league_id') == $league->id)>{{ $league->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="ap_field">
                                <label>Country Code</label>
                                <input type="text" name="country_code" value="{{ old('country_code', '+64') }}" placeholder="+64">
                            </div>
                            <div class="ap_field">
                                <label>Mobile Number</label>
                                <input type="text" name="mobile" value="{{ old('mobile') }}" placeholder="Mobile Number">
                            </div>

                            <div class="ap_field">
                                <label>Player Role</label>
                                <select name="player_role_id">
                                    <option value="">Select</option>
                                    @foreach ($roles as $role)
                                        <option value="{{ $role->id }}" @selected(old('player_role_id') == $role->id)>{{ $role->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="ap_field">
                                <label>Batting Style</label>
                                <select name="batting_style_id">
                                    <option value="">Select</option>
                                    @foreach ($battingStyles as $style)
                                        <option value="{{ $style->id }}" @selected(old('batting_style_id') == $style->id)>{{ $style->display_name ?? $style->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="ap_field">
                                <label>Bowling Style</label>
                                <select name="bowling_style_id">
                                    <option value="">Select</option>
                                    @foreach ($bowlingStyles as $style)
                                        <option value="{{ $style->id }}" @selected(old('bowling_style_id') == $style->id)>{{ $style->display_name ?? $style->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- POPULARITY SKILLS --}}
            <div class="ap_card" style="margin-top:20px;">
                <div class="ap_card_head"><h3>Popularity Skills</h3></div>
                <div class="ap_card_body">
                    <div class="ap_field full" data-skills data-other-id="{{ App\Models\PopularitySkill::OTHER }}">
                        <label>Popularity Skills</label>
                        <select data-skills-select>
                            <option value="">Select</option>
                            @foreach ($popularitySkills as $skill)
                                <option value="{{ $skill->id }}" data-name="{{ $skill->name }}">{{ $skill->name }}</option>
                            @endforeach
                        </select>

                        <div class="ap_chips" data-skills-chips></div>

                        {{-- Shown only when the "Other" skill is selected --}}
                        <div class="ap_skill_other" data-skill-other style="display:none">
                            <input type="text" name="popularity_skill_other" maxlength="100" placeholder="Enter your skill">
                        </div>
                    </div>
                </div>
            </div>

            {{-- SOCIAL MEDIA REACH --}}
            <div class="ap_card">
                <div class="ap_card_head"><h3>Social Media Reach</h3></div>
                <div class="ap_card_body">
                    <div class="ap_grid">
                        <div class="ap_field">
                            <label>Facebook Reach</label>
                            <input type="text" name="facebook_reach" value="{{ old('facebook_reach') }}" maxlength="50" placeholder="50K">
                        </div>
                        <div class="ap_field">
                            <label>Instagram Reach</label>
                            <input type="text" name="instagram_reach" value="{{ old('instagram_reach') }}" maxlength="50" placeholder="100K">
                        </div>
                        <div class="ap_field">
                            <label>Tiktok Reach</label>
                            <input type="text" name="tiktok_reach" value="{{ old('tiktok_reach') }}" maxlength="50" placeholder="20K">
                        </div>
                    </div>
                </div>
            </div>

            {{-- SOCIAL MEDIA FOLLOWERS --}}
            <div class="ap_card">
                <div class="ap_card_head"><h3>Social Media Followers</h3></div>
                <div class="ap_card_body">
                    <div class="ap_grid">
                        <div class="ap_field">
                            <label>Facebook Followers</label>
                            <input type="text" name="facebook_followers" value="{{ old('facebook_followers') }}" maxlength="50" placeholder="12.5K">
                        </div>
                        <div class="ap_field">
                            <label>Instagram Followers</label>
                            <input type="text" name="instagram_followers" value="{{ old('instagram_followers') }}" maxlength="50" placeholder="48.2K">
                        </div>
                        <div class="ap_field">
                            <label>Tiktok Followers</label>
                            <input type="text" name="tiktok_followers" value="{{ old('tiktok_followers') }}" maxlength="50" placeholder="102K">
                        </div>
                    </div>
                </div>
            </div>

            <div class="ap_footer">
                <span class="spacer"></span>
                <button type="button" class="ap_btn_next" data-goto-step="2">Next</button>
            </div>
        </div>

        {{-- ===================== STEP 2 — KEY STATE OVERVIEW ===================== --}}
        <div data-step="2" style="display:none">
            <div class="ap_card">
                <div class="ap_card_head"><h3>Player's Key Statistics</h3></div>
                <div class="ap_card_body">
                    <div class="ap_grid four">
                        <div class="ap_field">
                            <label>Matches Played</label>
                            <input type="number" min="0" name="matches_played" value="{{ old('matches_played') }}" placeholder="120">
                        </div>
                        <div class="ap_field">
                            <label>Runs Scored</label>
                            <input type="number" step="0.01" min="0" name="runs_scored" value="{{ old('runs_scored') }}" placeholder="1800">
                        </div>
                        <div class="ap_field">
                            <label>Wickets Taken</label>
                            <input type="number" min="0" name="wickets_taken" value="{{ old('wickets_taken') }}" placeholder="150">
                        </div>
                        <div class="ap_field">
                            <label>Fielding Catches</label>
                            <input type="number" min="0" name="fielding_catches" value="{{ old('fielding_catches') }}" placeholder="45">
                        </div>
                    </div>

                    {{-- The first row is stored as the player's best performance. --}}
                    <div style="margin-top:18px;" data-repeat="performances" data-next-index="1">
                        <div class="ap_repeat_row">
                            <div class="ap_field full">
                                <label>Best Performance</label>
                                <input type="text" name="performances[0][match_description]" value="{{ old('performances.0.match_description') }}" maxlength="255" placeholder="e.g. 105 Runs &amp; 3 Wickets vs Mumbai XI">
                            </div>
                        </div>
                    </div>
                    <button type="button" class="ap_add_more" data-add="performances">+ Add More Performance</button>
                </div>
            </div>

            <div class="ap_card">
                <div class="ap_card_head"><h3>Add Tournament</h3></div>
                <div class="ap_card_body">
                    <div data-repeat="achievements" data-next-index="1">
                        <div class="ap_repeat_row">
                            <div class="ap_grid">
                                <div class="ap_field">
                                    <label>Tournament Name</label>
                                    <input type="text" name="achievements[0][tournament_name]" value="{{ old('achievements.0.tournament_name') }}" maxlength="255" placeholder="Champion Leagues">
                                </div>
                                <div class="ap_field">
                                    <label>Year of Tournament</label>
                                    <input type="number" min="1900" max="{{ date('Y') + 1 }}" name="achievements[0][achievement_year]" value="{{ old('achievements.0.achievement_year') }}" placeholder="2023">
                                </div>
                                <div class="ap_field">
                                    <label>Position/Rank Achievement</label>
                                    <input type="text" name="achievements[0][achievement_title]" value="{{ old('achievements.0.achievement_title') }}" maxlength="255" placeholder="e.g. Winner, Semi-Finalist, #3 Overall">
                                </div>
                            </div>
                        </div>
                    </div>
                    <button type="button" class="ap_add_more" data-add="achievements">+ Add More Tournament</button>
                </div>
            </div>

            <div class="ap_footer">
                <button type="button" class="ap_btn_back" data-goto-step="1">Back</button>
                <button type="submit" class="ap_btn_next">Create Player</button>
            </div>
        </div>

        {{-- Templates for JS-added rows (placeholder __IDX__ replaced client-side) --}}
        <template data-tpl="performances">
            <div class="ap_repeat_row">
                <div class="ap_field full">
                    <label>Performance</label>
                    <input type="text" name="performances[__IDX__][match_description]" maxlength="255" placeholder="e.g. 72 Runs &amp; 2 Wickets vs Delhi XI">
                </div>
                <button type="button" class="ap_remove_row" data-remove-row>Remove</button>
            </div>
        </template>

        <template data-tpl="achievements">
            <div class="ap_repeat_row">
                <div class="ap_grid">
                    <div class="ap_field">
                        <label>Tournament Name</label>
                        <input type="text" name="achievements[__IDX__][tournament_name]" maxlength="255" placeholder="Champion Leagues">
                    </div>
                    <div class="ap_field">
                        <label>Year of Tournament</label>
                        <input type="number" min="1900" max="{{ date('Y') + 1 }}" name="achievements[__IDX__][achievement_year]" placeholder="2023">
                    </div>
                    <div class="ap_field">
                        <label>Position/Rank Achievement</label>
                        <input type="text" name="achievements[__IDX__][achievement_title]" maxlength="255" placeholder="e.g. Winner, Semi-Finalist, #3 Overall">
                    </div>
                </div>
                <button type="button" class="ap_remove_row" data-remove-row>Remove</button>
            </div>
        </template>
    </form>
</div>
@endsection

@push('script')
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
<script>
    $(function () {
        /* ---------------- step switching ---------------- */
        function showStep(step) {
            $('[data-step]').hide();
            $('[data-step="' + step + '"]').show();
            $('.ap_step').removeClass('active');
            $('.ap_step[data-step-tab="' + step + '"]').addClass('active');
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }

        // Step 1 must validate before its tab can be left, so a half-filled
        // player never reaches the submit button on step 2.
        function step1Valid() {
            let ok = true;
            $('[data-step="1"]').find('input, select').each(function () {
                if (!$(this).valid()) ok = false;
            });
            return ok;
        }

        $('[data-goto-step]').on('click', function () {
            const target = $(this).data('goto-step');
            if (target === 2 && !step1Valid()) return;
            showStep(target);
        });

        $('.ap_step').on('click', function () {
            const target = $(this).data('step-tab');
            if (target === 2 && !step1Valid()) return;
            showStep(target);
        });

        /* ---------------- avatar preview ---------------- */
        $('[data-avatar-input]').on('change', function () {
            const file = this.files && this.files[0];
            if (!file) return;
            const url = URL.createObjectURL(file);
            $('[data-avatar-preview]').attr('src', url);
        });

        /* ---------------- popularity skills ---------------- */
        const $skills = $('[data-skills]');
        const otherId = String($skills.data('other-id'));

        function toggleOther() {
            const hasOther = $skills.find('[data-skills-chips] .ap_chip[data-id="' + otherId + '"]').length > 0;
            $skills.find('[data-skill-other]').toggle(hasOther);
            if (!hasOther) $skills.find('[name="popularity_skill_other"]').val('');
        }

        function addChip(id, name) {
            id = String(id);
            if ($skills.find('[data-skills-chips] .ap_chip[data-id="' + id + '"]').length) return;

            $('<span/>', { class: 'ap_chip', 'data-id': id })
                .text(name)
                .append(
                    $('<button/>', { type: 'button', class: 'ap_chip_x', 'data-remove-skill': '', 'aria-label': 'Remove' }).html('&times;'),
                    $('<input/>', { type: 'hidden', name: 'popularity_skills[]', value: id })
                )
                .appendTo($skills.find('[data-skills-chips]'));

            $skills.find('[data-skills-select] option[value="' + id + '"]').prop('disabled', true);
            toggleOther();
        }

        $skills.on('change', '[data-skills-select]', function () {
            const id = $(this).val();
            if (!id) return;
            addChip(id, $(this).find('option:selected').data('name'));
            $(this).val('');
        });

        $skills.on('click', '[data-remove-skill]', function () {
            const $chip = $(this).closest('.ap_chip');
            $skills.find('[data-skills-select] option[value="' + $chip.data('id') + '"]').prop('disabled', false);
            $chip.remove();
            toggleOther();
        });

        /* ---------------- repeatable rows ---------------- */
        $('[data-add]').on('click', function () {
            const key = $(this).data('add');
            const $list = $('[data-repeat="' + key + '"]');
            const index = parseInt($list.data('next-index'), 10);
            const html = $('template[data-tpl="' + key + '"]').html().replace(/__IDX__/g, index);

            $list.append(html);
            $list.data('next-index', index + 1);
        });

        $(document).on('click', '[data-remove-row]', function () {
            $(this).closest('.ap_repeat_row').remove();
        });

        /* ---------------- validation ---------------- */
        $('#playerCreateForm').validate({
            errorClass: 'error',
            errorElement: 'label',
            rules: {
                league_id: { required: true },
                first_name: { required: true, maxlength: 100 },
                last_name: { maxlength: 100 },
                mobile: { required: true, maxlength: 15 },
                country_code: { maxlength: 5 },
                base_price: { required: true, number: true, min: 0 },
                player_role_id: { required: true },
                facebook_reach: { maxlength: 50 },
                instagram_reach: { maxlength: 50 },
                tiktok_reach: { maxlength: 50 },
                facebook_followers: { maxlength: 50 },
                instagram_followers: { maxlength: 50 },
                tiktok_followers: { maxlength: 50 },
                matches_played: { digits: true },
                runs_scored: { number: true, min: 0 },
                wickets_taken: { digits: true },
                fielding_catches: { digits: true }
            },
            messages: {
                league_id: { required: 'Please select a league.' },
                first_name: { required: 'Please enter the first name.' },
                mobile: { required: 'Please enter a mobile number.' },
                base_price: { required: 'Please enter a base price.' },
                player_role_id: { required: 'Please select a player role.' }
            },
            errorPlacement: function (error, element) {
                error.insertAfter(element);
            },
            // A failure on step 1 is invisible while step 2 is open — jump back to it.
            invalidHandler: function (event, validator) {
                if (validator.errorList.length && $('[data-step="1"]').find(validator.errorList[0].element).length) {
                    showStep(1);
                }
            },
            submitHandler: function (form) {
                $(form).find('button[type="submit"]').prop('disabled', true);
                form.submit();
            }
        });
    });
</script>
@endpush