@extends('adminlte::page')

@section('title', 'Heroes')

@section('content_header')
@stop

@section('css')
<style>
    #hero-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .hero-item {
        width: 140px;
    }
    .hero-card {
        border-radius: 6px;
        padding: 6px 4px;
        text-align: center;
        border: 1px solid #e8e8e8;
        border-bottom: 3px solid #ddd;
        background: #fff;
        transition: transform 0.15s;
    }
    .hero-card:hover { transform: scale(1.05); }
    .hero-card img {
        width: 72px; height: 72px;
        border-radius: 5px;
        border: 3px solid #ccc;
        background: #f5f5f5;
    }
    .hero-card .hero-name { font-size: 13px; font-weight: 700; margin: 4px 0 2px; }
    .hero-card .hero-stats { font-size: 12px; color: #666; }
    .hero-card .hero-stars { color: #f39c12; font-size: 13px; letter-spacing: -1px; }
    .hero-card .hero-fuse-badge {
        display: inline-block;
        font-size: 10px;
        font-weight: 700;
        padding: 1px 6px;
        border-radius: 3px;
        color: #fff;
        margin-top: 2px;
    }

    /* Fuse bottom bar colors */
    .fuse-0  { border-bottom-color: #999; }
    .fuse-1, .fuse-2   { border-bottom-color: #4caf50; }
    .fuse-3, .fuse-4, .fuse-5  { border-bottom-color: #2196f3; }
    .fuse-6, .fuse-7, .fuse-8, .fuse-9, .fuse-10 { border-bottom-color: #9c27b0; }
    .fuse-11, .fuse-12, .fuse-13 { border-bottom-color: #ff9800; }
    .fuse-14, .fuse-15, .fuse-16, .fuse-17, .fuse-18 { border-bottom-color: #f44336; }

    .hero-card img { border-color: #ddd; }

    /* Fuse badge colors */
    .fbg-gray   { background: #999; }
    .fbg-green  { background: #4caf50; }
    .fbg-blue   { background: #2196f3; }
    .fbg-purple { background: #9c27b0; }
    .fbg-orange { background: #ff9800; }
    .fbg-red    { background: #f44336; }

    .filter-btn.active { box-shadow: inset 0 2px 4px rgba(0,0,0,0.3); }
</style>
@stop

@php
    $fuseNames = [
        0 => 'Gray', 1 => 'Green', 2 => 'Green+1',
        3 => 'Blue', 4 => 'Blue+1', 5 => 'Blue+2',
        6 => 'Purple', 7 => 'Purple+1', 8 => 'Purple+2', 9 => 'Purple+3', 10 => 'Purple+4',
        11 => 'Orange', 12 => 'Orange+1', 13 => 'Orange+2',
        14 => 'Red', 15 => 'Red+1', 16 => 'Red+2', 17 => 'Red+3', 18 => 'Red+4',
    ];
    $fuseBadge = [
        0 => 'fbg-gray', 1 => 'fbg-green', 2 => 'fbg-green',
        3 => 'fbg-blue', 4 => 'fbg-blue', 5 => 'fbg-blue',
        6 => 'fbg-purple', 7 => 'fbg-purple', 8 => 'fbg-purple', 9 => 'fbg-purple', 10 => 'fbg-purple',
        11 => 'fbg-orange', 12 => 'fbg-orange', 13 => 'fbg-orange',
        14 => 'fbg-red', 15 => 'fbg-red', 16 => 'fbg-red', 17 => 'fbg-red', 18 => 'fbg-red',
    ];
@endphp

@section('content')
    <div style="margin-bottom: 15px;">
        <a href="{{ url()->previous() }}" class="btn btn-warning btn-sm">
            <i class="fa fa-arrow-left"></i> Back
        </a>
        <a href="{{ route('hero', $member->member_id) }}" class="btn btn-default btn-sm">
            <i class="fa fa-table"></i> Table View
        </a>
    </div>

    <div class="box box-primary">
        <div class="box-header with-border">
            <h3 class="box-title">
                <i class="fa fa-shield"></i> Heroes &mdash;
                <strong>{{ $member->member_name }}</strong>
                <small class="text-muted">(#{{ $member->member_id }} | Server {{ $member->member_server }})</small>
            </h3>
            <span class="pull-right text-muted">{{ $heroes->count() }} heroes</span>
        </div>
        <div class="box-body">
            {{-- Filter by star --}}
            <div style="margin-bottom: 8px;">
                <strong>Filter:</strong>
                <button class="btn btn-xs btn-default filter-btn active" data-star="all">All</button>
                @for($s = 7; $s >= 1; $s--)
                    @if($heroes->where('hero_star', $s)->count() > 0)
                        <button class="btn btn-xs btn-default filter-btn" data-star="{{ $s }}">
                            {{ $s }}<i class="fa fa-star text-yellow"></i>
                            <span class="badge">{{ $heroes->where('hero_star', $s)->count() }}</span>
                        </button>
                    @endif
                @endfor
            </div>
            {{-- Sort --}}
            <div style="margin-bottom: 15px;">
                <strong>Sort:</strong>
                <button class="btn btn-xs btn-default sort-btn" data-sort="hero-id">Hero ID</button>
                <button class="btn btn-xs btn-default sort-btn" data-sort="level">Level</button>
                <button class="btn btn-xs btn-default sort-btn" data-sort="fuse">Fuse</button>
                <button class="btn btn-xs btn-default sort-btn" data-sort="star">Star</button>
            </div>

            <div id="hero-grid">
                @foreach($heroes as $hero)
                    <div class="hero-item" data-star="{{ $hero->hero_star }}" data-fuse="{{ $hero->hero_fuse }}" data-level="{{ $hero->hero_level }}" data-hero-id="{{ $hero->hero_id }}">
                        <div class="hero-card fuse-{{ $hero->hero_fuse }}"
                             style="cursor:pointer"
                             data-hero-id="{{ $hero->hero_id }}"
                             data-star="{{ $hero->hero_star }}"
                             data-fuse="{{ $hero->hero_fuse }}"
                             data-level="{{ $hero->hero_level }}"
                             data-exp="{{ $hero->hero_exp }}"
                             data-awakened="{{ $hero->hero_awakened }}"
                             data-items='@json($hero->parsed_item)'
                             data-skins='@json($hero->parsed_skin)'
                             data-skills='@json($hero->parsed_skills)'>
                            <img src="{{ route('hero-avatar', $hero->hero_id) }}"
                                 onerror="this.src='{{ route('hero-avatar', 'img_random') }}'">
                            <div class="hero-name">#{{ $hero->hero_id }}</div>
                            <div class="hero-stars">
                                @for($i = 0; $i < $hero->hero_star; $i++)
                                    <i class="fa fa-star"></i>
                                @endfor
                            </div>
                            <div>
                                <span class="hero-fuse-badge {{ $fuseBadge[$hero->hero_fuse] ?? 'fbg-gray' }}">
                                    {{ $fuseNames[$hero->hero_fuse] ?? 'Fuse '.$hero->hero_fuse }}
                                </span>
                            </div>
                            <div class="hero-stats">
                                Lv.{{ $hero->hero_level }}
                                @if($hero->hero_awakened)
                                    <i class="fa fa-bolt text-red" title="Awakened"></i>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    {{-- Edit Hero Modal --}}
    <div class="modal fade" id="edit-hero-modal" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                    <h3 class="modal-title">Edit Hero <span id="modal-hero-id-title"></span></h3>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="modal-hero-id">
                    {{-- Hero preview - same structure as card outside --}}
                    <div class="text-center" style="margin-bottom: 15px;">
                        <div id="modal-preview-card" class="hero-card" style="display:inline-block; width:160px; border-bottom-width:4px; cursor:default; pointer-events:none;">
                            <img id="modal-hero-avatar" src="">
                            <div class="hero-name" id="modal-preview-name"></div>
                            <div class="hero-stars" id="modal-preview-stars"></div>
                            <div>
                                <span class="hero-fuse-badge" id="modal-preview-fuse"></span>
                            </div>
                            <div class="hero-stats" id="modal-preview-stats"></div>
                        </div>
                    </div>
                    <hr style="margin:10px 0;">
                    @php
                        $fuseOptionColors = [
                            0 => '#999', 1 => '#4caf50', 2 => '#4caf50',
                            3 => '#2196f3', 4 => '#2196f3', 5 => '#2196f3',
                            6 => '#9c27b0', 7 => '#9c27b0', 8 => '#9c27b0', 9 => '#9c27b0', 10 => '#9c27b0',
                            11 => '#ff9800', 12 => '#ff9800', 13 => '#ff9800',
                            14 => '#f44336', 15 => '#f44336', 16 => '#f44336', 17 => '#f44336', 18 => '#f44336',
                        ];
                    @endphp
                    <div style="display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap;">
                        <div style="width:65px;">
                            <label>Star</label>
                            <input class="form-control modal-input" type="number" id="modal-hero-star" min="1" max="7">
                        </div>
                        <div style="flex:1; min-width:140px;">
                            <label>Fuse</label>
                            <select class="form-control modal-input" id="modal-hero-fuse">
                                @foreach($fuseNames as $fval => $fname)
                                    <option value="{{ $fval }}" style="color: {{ $fuseOptionColors[$fval] }}; font-weight: 700;">{{ $fval }} - {{ $fname }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div style="width:75px;">
                            <label>Level</label>
                            <input class="form-control modal-input" type="number" id="modal-hero-level" min="1" max="{{ $member->member_level }}">
                        </div>
                        <div style="width:90px;">
                            <label>EXP</label>
                            <input class="form-control" type="number" id="modal-hero-exp" min="0">
                        </div>
                        <div style="padding-bottom:8px;">
                            <label style="white-space:nowrap;">
                                <input type="checkbox" id="modal-hero-awakened" class="modal-input"> Awaken
                            </label>
                        </div>
                    </div>

                    <hr style="margin:10px 0;">
                    {{-- Skins (default open) --}}
                    <div class="panel panel-default" style="margin-bottom:10px;">
                        <div class="panel-heading" style="padding:6px 12px; cursor:pointer;" data-toggle="collapse" data-target="#panel-skins">
                            <strong><i class="fa fa-paint-brush"></i> Skins</strong>
                            <i class="fa fa-chevron-down pull-right"></i>
                        </div>
                        <div id="panel-skins" class="panel-body collapse in" style="padding:8px;">
                            <div id="modal-skins-body"></div>
                        </div>
                    </div>

                    {{-- Items --}}
                    <div class="panel panel-default" style="margin-bottom:10px;">
                        <div class="panel-heading" style="padding:6px 12px; cursor:pointer;" data-toggle="collapse" data-target="#panel-items">
                            <strong><i class="fa fa-suitcase"></i> Items</strong>
                            <i class="fa fa-chevron-down pull-right"></i>
                        </div>
                        <div id="panel-items" class="panel-body collapse" style="padding:8px;">
                            <table class="table table-condensed table-bordered" style="margin:0; font-size:12px;">
                                <thead><tr><th>Slot</th><th>Item ID</th><th>EXP</th><th>Equip</th></tr></thead>
                                <tbody id="modal-items-body"></tbody>
                            </table>
                        </div>
                    </div>

                    {{-- Skills --}}
                    <div class="panel panel-default" style="margin-bottom:10px;">
                        <div class="panel-heading" style="padding:6px 12px; cursor:pointer;" data-toggle="collapse" data-target="#panel-skills">
                            <strong><i class="fa fa-bolt"></i> Skills</strong>
                            <i class="fa fa-chevron-down pull-right"></i>
                        </div>
                        <div id="panel-skills" class="panel-body collapse" style="padding:8px;">
                            <table class="table table-condensed table-bordered" style="margin:0; font-size:12px;">
                                <thead><tr><th>Skill ID</th><th>Level</th></tr></thead>
                                <tbody id="modal-skills-body"></tbody>
                            </table>
                        </div>
                    </div>

                    <div id="modal-hero-result" style="margin-top:10px;"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="modal-hero-save"><i class="fa fa-save"></i> Save</button>
                </div>
            </div>
        </div>
    </div>
@stop

@section('js')
<script type="text/javascript">
    var memberId = {{ $member->member_id }};
    var assetBase = '{{ url("hero-avatar") }}/';
    var fuseNames = {!! json_encode($fuseNames) !!};

    var fuseBadgeClass = {
        0:'fbg-gray',1:'fbg-green',2:'fbg-green',
        3:'fbg-blue',4:'fbg-blue',5:'fbg-blue',
        6:'fbg-purple',7:'fbg-purple',8:'fbg-purple',9:'fbg-purple',10:'fbg-purple',
        11:'fbg-orange',12:'fbg-orange',13:'fbg-orange',
        14:'fbg-red',15:'fbg-red',16:'fbg-red',17:'fbg-red',18:'fbg-red'
    };

    function updateModalPreview() {
        var heroId = $('#modal-hero-id').val();
        var star = parseInt($('#modal-hero-star').val()) || 0;
        var fuse = parseInt($('#modal-hero-fuse').val()) || 0;
        var level = $('#modal-hero-level').val() || 0;
        var awakened = $('#modal-hero-awakened').is(':checked');

        // Card fuse class
        var card = $('#modal-preview-card');
        card.removeClass(function(i, cls) { return (cls.match(/fuse-\d+/g) || []).join(' '); });
        card.addClass('fuse-' + fuse);

        // Name
        $('#modal-preview-name').text('#' + heroId);

        // Stars
        var starsHtml = '';
        for (var i = 0; i < star; i++) starsHtml += '<i class="fa fa-star"></i>';
        $('#modal-preview-stars').html(starsHtml);

        // Fuse badge
        var badge = $('#modal-preview-fuse');
        badge.removeClass().addClass('hero-fuse-badge ' + (fuseBadgeClass[fuse] || 'fbg-gray'));
        badge.text(fuseNames[fuse] || 'Fuse ' + fuse);

        // Level & awakened
        var statsHtml = 'Lv.' + level;
        if (awakened) statsHtml += ' <i class="fa fa-bolt text-red" title="Awakened"></i>';
        $('#modal-preview-stats').html(statsHtml);
    }

    var fuseSelectColors = {0:'#999',1:'#4caf50',2:'#4caf50',3:'#2196f3',4:'#2196f3',5:'#2196f3',6:'#9c27b0',7:'#9c27b0',8:'#9c27b0',9:'#9c27b0',10:'#9c27b0',11:'#ff9800',12:'#ff9800',13:'#ff9800',14:'#f44336',15:'#f44336',16:'#f44336',17:'#f44336',18:'#f44336'};

    function updateFuseSelectColor() {
        var fuse = parseInt($('#modal-hero-fuse').val()) || 0;
        $('#modal-hero-fuse').css({'color': fuseSelectColors[fuse] || '#333', 'font-weight': '700'});
    }

    // Live update preview on input change
    $(document).on('input change', '.modal-input', function () {
        updateModalPreview();
        updateFuseSelectColor();
    });

    function renderItems(items) {
        var html = '';
        for (var slot = 1; slot <= 6; slot++) {
            var item = items[slot] || {id: 0, exp: 0, equip: false};
            var checked = item.equip ? 'checked' : '';
            html += '<tr>'
                + '<td>' + slot + '</td>'
                + '<td><input type="number" class="form-control input-sm item-id" data-slot="' + slot + '" value="' + (item.id || 0) + '" style="width:80px;"></td>'
                + '<td><input type="number" class="form-control input-sm item-exp" data-slot="' + slot + '" value="' + (item.exp || 0) + '" style="width:80px;"></td>'
                + '<td><input type="checkbox" class="item-equip" data-slot="' + slot + '" ' + checked + '></td>'
                + '</tr>';
        }
        return html;
    }

    function collectItems() {
        var items = {};
        for (var slot = 1; slot <= 6; slot++) {
            items[slot] = {
                id: parseInt($('.item-id[data-slot="' + slot + '"]').val()) || 0,
                exp: parseInt($('.item-exp[data-slot="' + slot + '"]').val()) || 0,
                equip: $('.item-equip[data-slot="' + slot + '"]').is(':checked')
            };
        }
        return items;
    }

    function renderSkins(skins) {
        var html = '<table class="table table-condensed table-bordered" style="margin:0; font-size:12px; text-align:center;">';
        html += '<thead><tr><th>Slot</th><th>Status</th><th>Equip</th><th>Action</th></tr></thead><tbody>';
        for (var i = 0; i <= 3; i++) {
            var unlocked = skins && skins.hasOwnProperty(i);
            var isEquip = unlocked && skins[i].equip;
            var statusLabel, equipLabel, actionBtn;

            if (i === 0) {
                statusLabel = '<span class="label label-info">Default</span>';
                equipLabel = isEquip ? '<span class="label label-success">Yes</span>' : '<span class="label label-default">No</span>';
                actionBtn = '<button class="btn btn-default btn-xs" disabled>Default</button>';
            } else if (unlocked) {
                statusLabel = '<span class="label label-success"><i class="fa fa-unlock"></i> Unlocked</span>';
                equipLabel = isEquip ? '<span class="label label-success">Yes</span>' : '<span class="label label-default">No</span>';
                actionBtn = '<button class="btn btn-danger btn-xs btn-skin-toggle" data-index="' + i + '" data-active="false"><i class="fa fa-lock"></i> Lock</button>';
            } else {
                statusLabel = '<span class="label label-default"><i class="fa fa-lock"></i> Locked</span>';
                equipLabel = '<span class="text-muted">-</span>';
                actionBtn = '<button class="btn btn-primary btn-xs btn-skin-toggle" data-index="' + i + '" data-active="true"><i class="fa fa-unlock"></i> Unlock</button>';
            }

            html += '<tr><td>' + i + '</td><td>' + statusLabel + '</td><td>' + equipLabel + '</td><td>' + actionBtn + '</td></tr>';
        }
        html += '</tbody></table>';
        return html;
    }

    function renderSkills(skills) {
        var html = '';
        if (skills && skills.length > 0) {
            skills.forEach(function(s) {
                html += '<tr>'
                    + '<td>' + s.skill_hero_id + '<input type="hidden" class="skill-id" value="' + s.skill_hero_id + '"></td>'
                    + '<td><input type="number" class="form-control input-sm skill-level" data-skill="' + s.skill_hero_id + '" value="' + s.skill_hero_level + '" min="1" style="width:70px;"></td>'
                    + '</tr>';
            });
        }
        return html || '<tr><td colspan="2" class="text-muted text-center">No skills</td></tr>';
    }

    function collectSkills() {
        var skills = {};
        $('.skill-id').each(function () {
            var skillId = $(this).val();
            var level = parseInt($('.skill-level[data-skill="' + skillId + '"]').val()) || 1;
            skills[skillId] = level;
        });
        return skills;
    }

    var maxHeroSkin = {{ $max_hero_skin ?? 5 }};
    var originalItems = null;
    var originalSkills = null;

    // Open modal on card click
    $(document).on('click', '.hero-card', function (e) {
        e.stopPropagation();
        var card = $(this);
        var heroId = card.attr('data-hero-id');
        $('#modal-hero-id').val(heroId);
        $('#modal-hero-id-title').text('#' + heroId);
        $('#modal-hero-avatar').attr('src', assetBase + heroId);
        $('#modal-hero-star').val(card.attr('data-star'));
        $('#modal-hero-fuse').val(card.attr('data-fuse'));
        $('#modal-hero-level').val(card.attr('data-level'));
        $('#modal-hero-exp').val(card.attr('data-exp'));
        $('#modal-hero-awakened').prop('checked', card.attr('data-awakened') == '1');
        $('#modal-hero-result').html('');

        // Items
        var items = {};
        try { items = JSON.parse(card.attr('data-items')) || {}; } catch(e) {}
        $('#modal-items-body').html(renderItems(items));
        originalItems = JSON.stringify(items);

        // Skins
        var skins = {};
        try { skins = JSON.parse(card.attr('data-skins')) || {}; } catch(e) {}
        $('#modal-skins-body').html(renderSkins(skins));

        // Skills
        var skills = [];
        try { skills = JSON.parse(card.attr('data-skills')) || []; } catch(e) {}
        $('#modal-skills-body').html(renderSkills(skills));
        originalSkills = JSON.stringify(collectSkills());

        // Skins open, others closed
        $('#panel-skins').addClass('in');
        $('#panel-items, #panel-skills').removeClass('in');

        updateModalPreview();
        updateFuseSelectColor();
        $('#edit-hero-modal').modal('show');
    });

    // Save hero
    $('#modal-hero-save').on('click', function () {
        var btn = $(this);
        var heroId = $('#modal-hero-id').val();
        var maxLevel = {{ $member->member_level }};
        var newStar = Math.min(7, Math.max(1, parseInt($('#modal-hero-star').val()) || 1));
        var newFuse = parseInt($('#modal-hero-fuse').val());
        var newLevel = Math.min(maxLevel, Math.max(1, parseInt($('#modal-hero-level').val()) || 1));
        $('#modal-hero-star').val(newStar);
        $('#modal-hero-level').val(newLevel);
        var newExp = parseInt($('#modal-hero-exp').val());
        var newAwakened = $('#modal-hero-awakened').is(':checked') ? 1 : 0;

        btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Saving...');

        $.ajax({
            url: '{{ url("members") }}/' + memberId + '/ajax-update-hero',
            type: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            data: function () {
                var d = {
                    hero_id: heroId,
                    hero_star: newStar,
                    hero_fuse: newFuse,
                    hero_level: newLevel,
                    hero_exp: newExp,
                    hero_awakened: newAwakened,
                };
                var currentItems = JSON.stringify(collectItems());
                if (currentItems !== originalItems) {
                    d.hero_item = currentItems;
                }
                var currentSkills = JSON.stringify(collectSkills());
                if (currentSkills !== originalSkills) {
                    d.hero_skill = currentSkills;
                }
                return d;
            }(),
            dataType: 'json',
            success: function (res) {
                if (!res.success) {
                    btn.prop('disabled', false).html('<i class="fa fa-save"></i> Save');
                    $('#modal-hero-result').html('<span class="text-red">' + res.message + '</span>');
                    return;
                }
                btn.prop('disabled', false).html('<i class="fa fa-save"></i> Save');
                $('#modal-hero-result').html('<span class="text-green"><i class="fa fa-check"></i> Saved successfully</span>');

                // Update card
                var card = $('.hero-card[data-hero-id="' + heroId + '"]');
                card.attr('data-star', newStar).attr('data-fuse', newFuse).attr('data-level', newLevel).attr('data-exp', newExp).attr('data-awakened', newAwakened);

                // Update star display
                var starsHtml = '';
                for (var i = 0; i < newStar; i++) starsHtml += '<i class="fa fa-star"></i>';
                card.find('.hero-stars').html(starsHtml);

                // Update fuse class & badge
                card.removeClass(function(i, cls) { return (cls.match(/fuse-\d+/g) || []).join(' '); });
                card.addClass('fuse-' + newFuse);
                var badgeCls = fuseBadgeClass[newFuse] || 'fbg-gray';
                card.find('.hero-fuse-badge').removeClass().addClass('hero-fuse-badge ' + badgeCls).text(fuseNames[newFuse] || 'Fuse ' + newFuse);

                // Update level & awakened
                var statsHtml = 'Lv.' + newLevel;
                if (newAwakened) statsHtml += ' <i class="fa fa-bolt text-red" title="Awakened"></i>';
                card.find('.hero-stats').html(statsHtml);

                // Update filter data
                card.closest('.hero-item').attr('data-star', newStar).attr('data-fuse', newFuse).attr('data-level', newLevel).attr('data-hero-id', heroId);

                // Update items & skills data on card
                card.attr('data-items', JSON.stringify(collectItems()));
                var updatedSkills = [];
                $('.skill-id').each(function () {
                    var sid = $(this).val();
                    updatedSkills.push({
                        skill_hero_id: parseInt(sid),
                        skill_hero_level: parseInt($('.skill-level[data-skill="' + sid + '"]').val()) || 1
                    });
                });
                card.attr('data-skills', JSON.stringify(updatedSkills));

                setTimeout(function () { $('#edit-hero-modal').modal('hide'); }, 600);
            },
            error: function () {
                btn.prop('disabled', false).html('<i class="fa fa-save"></i> Save');
                $('#modal-hero-result').html('<span class="text-red">Error saving hero</span>');
            }
        });
    });

    // Skin toggle (unlock/lock)
    $(document).on('click', '.btn-skin-toggle', function () {
        var btn = $(this);
        var heroId = $('#modal-hero-id').val();
        var index = btn.data('index');
        var isActive = btn.data('active');

        btn.prop('disabled', true);

        $.ajax({
            url: '{{ route("members.toggle-hero-skin", ["idUser" => $member->member_id]) }}',
            type: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            data: { hero_id: heroId, index: index, is_active: isActive },
            dataType: 'json',
            success: function (response) {
                if (response.status || response) {
                    // Reload skins from server
                    $.ajax({
                        url: '{{ route("members.hero-skin", ["idUser" => $member->member_id]) }}',
                        type: 'GET',
                        data: { hero_id: heroId },
                        dataType: 'json',
                        success: function (skinData) {
                            var newSkins = skinData.hero_skins || {};
                            // Update card data
                            var card = $('.hero-card[data-hero-id="' + heroId + '"]');
                            card.attr('data-skins', JSON.stringify(newSkins));
                            // Re-render skins in modal
                            $('#modal-skins-body').html(renderSkins(newSkins));
                        }
                    });
                }
            },
            error: function () {
                btn.prop('disabled', false);
                alert('Error toggling skin');
            }
        });
    });

    $('.filter-btn').on('click', function () {
        var star = $(this).data('star');
        $('.filter-btn').removeClass('active');
        $(this).addClass('active');

        if (star === 'all') {
            $('.hero-item').show();
        } else {
            $('.hero-item').hide();
            $('.hero-item[data-star="' + star + '"]').show();
        }
    });

    // Sort
    function sortHeroes(field) {
        var grid = $('#hero-grid');
        var items = grid.children('.hero-item').get();
        items.sort(function (a, b) {
            var va = parseInt($(a).attr('data-' + field)) || 0;
            var vb = parseInt($(b).attr('data-' + field)) || 0;
            return vb - va; // descending
        });
        items.forEach(function (item) { grid.append(item); });
    }

    $('.sort-btn').on('click', function () {
        $('.sort-btn').removeClass('active');
        $(this).addClass('active');
        sortHeroes($(this).data('sort'));
    });

    // Default sort by hero id
    $('.sort-btn[data-sort="hero-id"]').addClass('active');
    sortHeroes('hero-id');
</script>
@endsection