@extends('adminlte::page')

@section('title', 'HeroLegend')

@section('content_header')
    <meta name="csrf-token" content="{{ csrf_token() }}">
@stop

@section('css')
    <style>
        td input{
            border: none;
            text-align: center;
        }

        th{
            text-align: center;
        }

        input[type=checkbox]{
            transform: scale(1.3);
            margin-left: 10px;
        }

    </style>
@stop

@section('content')
    <div class="row">
        <div class="col-md-12">
            @if(Session::has('message'))
                <div class="alert alert-success">{{Session::get('message')}}</div>
            @endif
        </div>
        <div class="col-md-12">
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">Heroes Manager ( Member: {{$member->member_name}} [ ID: {{$member->member_id}} ])</h3>
                </div>
                <div class="box-body">
                    <a href="{{ route('members.show_v2', $member->member_id) }}" title="Back">
                        <button class="btn btn-warning btn-sm"><i class="fa fa-arrow-left" aria-hidden="true"></i> Back
                        </button>
                    </a>
                    <form action="{{ URL::action('ServerController@updateMemberItems') }}" method="POST">
                        {{ csrf_field() }}

                        <div class="table-responsive">
                            <table class="table table-borderless">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Star</th>
                                        <th>Fuse</th>
                                        <th>Level</th>
                                        <th>EXP</th>
                                        <th>Item</th>
                                        <th>Skins</th>
                                        <th>Skill</th>
                                        <th><a href="#" class="addNewHero">[Add hero]</a></th>
                                    </tr>
                                </thead>

                                <tbody id="listHero">
                                    @foreach($list_hero as $hero)
                                        <tr action="" method="post" id="">
                                            <td>
                                                <input type="text" name="hero_id" id="hero-id-{{$hero->hero_id}}" value="{{$hero->hero_id}}" readonly/>
                                            </td>
                                            <td>
                                                <input type="text" name="hero_star" id="hero-star-{{$hero->hero_id}}" value="{{$hero->hero_star}}" />
                                            </td>
                                            <td>
                                                <input type="text" name="hero_fuse" id="hero-fuse-{{$hero->hero_id}}" value="{{$hero->hero_fuse}}" />
                                            </td>
                                            <td>
                                                <input type="text" name="hero_level" id="hero-level-{{$hero->hero_id}}" value="{{$hero->hero_level}}" />
                                            </td>
                                            <td>
                                                <input type="text" name="hero_exp" id="hero-exp-{{$hero->hero_id}}" value="{{$hero->hero_exp}}"/>
                                            </td>
                                            <td>
                                                <input type="hidden" name="hero_item" value='null' id="heroitem-{{$hero->hero_id}}" />
                                                <a href="#" style="display: flex" data-toggle="modal" data-target="#openPopupHeroItem" class="openPopupHeroItem" data-id="{{$hero->hero_id}}">
                                                                                                    </a>
                                            </td>
                                            <td style="cursor: pointer">
                                                <a href="#" data-toggle="modal" data-target="#hero-skin-modal"
                                                   class="hero-skin-show" data-hero-id="{{$hero->hero_id}}">
                                                    @for($i = 0; $i <= $max_hero_skin; $i ++)
                                                        <input class="skin-checkbox" type="checkbox"
                                                               name="{{$member->member_id}}-{{$hero->skin}}-skins[]"
                                                               id="skin-input-{{$hero->hero_id}}-{{$i}}"
                                                                {{ isset($hero->hero_skin[$i]) ? '' : 'disabled' }}
                                                                {{ (isset($hero->hero_skin[$i]) && $hero->hero_skin[$i]['equip']) ? 'checked' : '' }}>
                                                    @endfor
                                                </a>
                                            </td>
                                            <td>
                                                <input type="hidden" name="skill_hero" value="{{$hero->skill}}" id="skillhero-{{$hero->hero_id}}" />
                                                <a href="#" class="editSkillForm" data-toggle="modal" data-target="#openPopupHeroSkill" data-id="{{$hero->hero_id}}">Edit</a>
                                            </td>
                                            <td>
                                                <a href="#" class="iconTip iconSave saveHeroInfo" data-id="{{$hero->hero_id}}">
                                                    <span><i class="fa fa-floppy-o" aria-hidden="true"></i></span>
                                                </a>
                                                <a href="#" action="" method="post" class="iconTip iconDelete deleteHero">
                                                    <input type="hidden" name="hero_id" value="{{$hero->hero_id}}" disabled />
                                                    <input type="hidden" id="member_id" value="{{$member->member_id}}" disabled />
                                                    <span><i class="fa fa-window-close" style="color: red" aria-hidden="true"></i></span>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <div style="margin-left: 40%">
                            {{ $list_hero->links() }}
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="hero-skin-modal">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h3 class="modal-title">Hero Skins</h3>
                    <small>NOTE: Data will be <strong>updated</strong> after <strong>click button</strong>, not after close modal!</small>
                </div>
                <div class="modal-body">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>Index</th>
                            <th>Is Equip</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" data-dismiss="modal">Done</button>
                </div>
            </div>
        </div>
    </div>


    <!-- POPUP :: Hero Item -->
    <div class="modal fade" id="openPopupHeroItem">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h3 class="modal-title">Hero Item</h3>
                </div>
                <div class="modal-body">
                    <form class="popupform heroItem" onsubmit="return validateForm()">
                        <p>Hero ID: <strong id="heroitemidhero"></strong></p>
                        <table cellspacing="0" cellpadding="0" width="100%" class="listData">
                            <thead>
                            <tr>
                                <th width="25%">Index</th>
                                <th width="25%">ID</th>
                                <th width="25%">EXP</th>
                                <th width="25%">Equip</th>
                            </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <input type="text" name="item[1][index]" value="1" readonly />
                                    </td>
                                    <td>
                                        <input type="text" name="item[1][id]" value="0" id="heroitem1id" form-valid="int:1" />
                                    </td>
                                    <td>
                                        <input type="text" name="item[1][exp]" value="0" id="heroitem1exp" form-valid="int:0" />
                                    </td>
                                    <td>
                                        <input type="hidden" name="item[1][equip]" id="heroitem1equipinput" value="false" />
                                        <input type="checkbox" id="heroitem1equipspan">
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type="text" name="item[2][index]" value="2" readonly />
                                    </td>
                                    <td>
                                        <input type="text" name="item[2][id]" value="0" id="heroitem2id" form-valid="int:1" />
                                    </td>
                                    <td>
                                        <input type="text" name="item[2][exp]" value="0" id="heroitem2exp" form-valid="int:0" />
                                    </td>
                                    <td>
                                        <input type="hidden" name="item[2][equip]" id="heroitem2equipinput" value="false" />
                                        <input type="checkbox" id="heroitem2equipspan">
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type="text" name="item[3][index]" value="3" readonly />
                                    </td>
                                    <td>
                                        <input type="text" name="item[3][id]" value="0" id="heroitem3id" form-valid="int:1" />
                                    </td>
                                    <td>
                                        <input type="text" name="item[3][exp]" value="0" id="heroitem3exp" form-valid="int:0" />
                                    </td>
                                    <td>
                                        <input type="hidden" name="item[3][equip]" id="heroitem3equipinput" value="false" />
                                        <input type="checkbox" id="heroitem3equipspan">
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type="text" name="item[4][index]" value="4" readonly />
                                    </td>
                                    <td>
                                        <input type="text" name="item[4][id]" value="0" id="heroitem4id" form-valid="int:1" />
                                    </td>
                                    <td>
                                        <input type="text" name="item[4][exp]" value="0" id="heroitem4exp" form-valid="int:0" />
                                    </td>
                                    <td>
                                        <input type="hidden" name="item[4][equip]" id="heroitem4equipinput" value="false" />
                                        <input type="checkbox" id="heroitem4equipspan">
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type="text" name="item[5][index]" value="5" readonly />
                                    </td>
                                    <td>
                                        <input type="text" name="item[5][id]" value="0" id="heroitem5id" form-valid="int:1" />
                                    </td>
                                    <td>
                                        <input type="text" name="item[5][exp]" value="0" id="heroitem5exp" form-valid="int:0" />
                                    </td>
                                    <td>
                                        <input type="hidden" name="item[5][equip]" id="heroitem5equipinput" value="false" />
                                        <input type="checkbox" id="heroitem5equipspan">
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <input type="text" name="item[6][index]" value="6" readonly />
                                    </td>
                                    <td>
                                        <input type="text" name="item[6][id]" value="0" id="heroitem6id" form-valid="int:1" />
                                    </td>
                                    <td>
                                        <input type="text" name="item[6][exp]" value="0" id="heroitem6exp" form-valid="int:0" />
                                    </td>
                                    <td>
                                        <input type="hidden" name="item[6][equip]" id="heroitem6equipinput" value="false" />
                                        <input type="checkbox" id="heroitem6equipspan">
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="submit" id="save_item_btn" class="btn btn-success">Save</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- POPUP :: Hero Skill -->
    <div class="modal fade" id="openPopupHeroSkill">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h3 class="modal-title">Hero Skill</h3>
                </div>
                <div class="modal-body">
                    <form class="popupform heroSkill">
                        <p>Hero ID: <strong id="heroskillidhero"></strong></p>
                        <table cellspacing="0" cellpadding="0" width="100%" class="listData">
                            <thead>
                                <tr>
                                    <th width="40%">ID</th>
                                    <th width="40%">Level</th>
                                    <th width="20%">
                                        <a href="#" id="addNewSkill">[Add Skill]</a>
                                    </th>
                                </tr>
                            </thead>
                            <tbody id="listSkillPopup"></tbody>
                        </table>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success" id="save_skill_btn">Save</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

@stop

@push('js')
    <!-- TEMPLATE :: Skill Record -->
    <script type="text/x-handlebars-template" id="TemplateSkillRecord">
        <tr id="record-hero-skill-SKILL_ID">
            <td>
                <input type="text" value="SKILL_RID" class="heroSkillId" data-id="SKILL_ID" />
            </td>
            <td>
                <input type="text" value="SKILL_LEVEL" class="heroSkillLevel-SKILL_ID" />
            </td>
            <td>
                <a href="#" class="iconTip iconDelete deleteSkill" data-id="SKILL_ID">
                    <span>Delete</span>
                </a>
            </td>
        </tr>
    </script>

    <!-- TEMPLATE :: Create new Hero -->
    <script type="text/x-handlebars-template" id="TemplateCreateNewHero">
        <tr action="" method="post" id="infoHero-TOKEN">
            <td>
                <input type="text" name="hero_id" id="hero-id-TOKEN" value="0" />
            </td>
            <td>
                <input type="text" name="hero_star" value="1" id="hero-star-TOKEN" data-id="TOKEN"/>
            </td>
            <td>
                <input type="text" name="hero_fuse" value="0" id="hero-fuse-TOKEN" data-id="TOKEN"/>
            </td>
            <td>
                <input type="text" name="hero_level" value="1" id="hero-level-TOKEN" data-id="TOKEN"/>
            </td>
            <td>
                <input type="text" name="hero_exp" value="0" id="hero-exp-TOKEN" data-id="TOKEN"/>
            </td>
            <td>
                <input type="hidden" name="hero_item" value="{&quot;1&quot;:{&quot;id&quot;:0,&quot;exp&quot;:0,&quot;equip&quot;:false},&quot;2&quot;:{&quot;id&quot;:0,&quot;exp&quot;:0,&quot;equip&quot;:false},&quot;3&quot;:{&quot;id&quot;:0,&quot;exp&quot;:0,&quot;equip&quot;:false},&quot;4&quot;:{&quot;id&quot;:0,&quot;exp&quot;:0,&quot;equip&quot;:false},&quot;5&quot;:{&quot;id&quot;:0,&quot;exp&quot;:0,&quot;equip&quot;:false},&quot;6&quot;:{&quot;id&quot;:0,&quot;exp&quot;:0,&quot;equip&quot;:false}}" id="heroitem-TOKEN" />
                <a href="#" style="display: flex" class="openPopupHeroItem" data-id="TOKEN">
                    <input type="checkbox" id="span-heroitem-index-TOKEN-1">
                    <input type="checkbox" id="span-heroitem-index-TOKEN-2">
                    <input type="checkbox" id="span-heroitem-index-TOKEN-3">
                    <input type="checkbox" id="span-heroitem-index-TOKEN-4">
                    <input type="checkbox" id="span-heroitem-index-TOKEN-5">
                    <input type="checkbox" id="span-heroitem-index-TOKEN-6">
                </a>
            </td>
            <td>
                <input type="hidden" name="skill_hero" value="{&quot;0&quot;:1}" id="skillhero-TOKEN" />
                <a href="#" class="editSkillForm" data-toggle="modal" data-target="#openPopupHeroSkill" data-id="TOKEN">Edit</a>
            </td>
            <td>
                <a href="#" class="iconTip iconSave saveHeroInfo" data-id="TOKEN">
                    <span><i class="fa fa-floppy-o" aria-hidden="true"></i></span>
                </a>
                <a href="#" class="iconTip iconDelete removeHero" data-id="TOKEN">
                    <span><i class="fa fa-window-close" style="color: red" aria-hidden="true"></i></span>
                </a>
            </td>
        </tr>
    </script>

    <script type="text/javascript">

        function dataSkinToSkins(dataSkin, maxSkin) {
            let result
            let skins = JSON.parse(dataSkin)
            console.log(skins)
            for (let i = 0; i <= maxSkin; i++) {

            }

            return JSON.parse(dataSkin)
        }
        function generateToken(){
            let date = new Date();
            let token = date.getTime() + Math.random();
            return token.toString().replace('.', '');
        }

        $(document).ready(function(){
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            // TODO: Click open popup of hero item
            $(document).on('click', '.openPopupHeroItem', function(){
                var id = $(this).attr('data-id'),
                    heroItem = $('#heroitem-' + id).val(),
                    newid = +$('#heroid-' + id).val();

                if (NaN !== newid && newid > 0)  $('#heroitemidhero').text(newid);
                $('#heroitemidhero').attr('data-id', id);
                $('#heroitemidhero').text(id);

                try{
                    heroItem = JSON.parse(heroItem);
                    if (!!heroItem && heroItem.constructor === Object){
                        for (let x in heroItem){
                            let info = heroItem[x];

                            $('#heroitem' + x + 'id').val(info.id);
                            $('#heroitem' + x + 'exp').val(info.exp);
                            $('#heroitem' + x + 'equipinput').val(JSON.stringify(info.equip));

                            if (info.equip)
                                $('#heroitem' + x + 'equipspan').prop('checked', true);
                            else
                                $('#heroitem' + x + 'equipspan').prop('checked', false);
                        }
                    }
                }catch(e){}
                return false;
            });

            $(document).on('click', '.hero-skin-show', function () {
                let heroId = $(this).data('hero-id');
                $.ajax({
                    url: "{{route('members.hero-skin', ['idUser'=> $member->member_id])}}",
                    type: "get",
                    data : {
                        'hero_id' : heroId
                    },
                    dataType:'json',
                    success: function (response) {
                        if (response) {
                            const heroId = response.hero_id
                            const heroSkins = response.hero_skins
                            for (let i = 0; i <= response.max_hero_skin; i ++) {
                                if (heroSkins.hasOwnProperty(i)) {
                                    if (i === 0) {
                                        $('#hero-skin-modal tbody').append(`
                                            <tr style="text-align: center" id="tr-${i}">
                                                <td>${i}</td>
                                                <td>${heroSkins[i].equip}</td>
                                                <td><button class="btn btn-default" disabled>Default</button></td>
                                            </tr>
                                        `)
                                    } else {
                                        $('#hero-skin-modal tbody').append(`
                                            <tr style="text-align: center" id="tr-${i}">
                                                <td>${i}</td>
                                                <td>${heroSkins[i].equip}</td>
                                                <td><button class="deactive-skin btn btn-danger" data-hero-id=${heroId} data-index=${i}>Deactive</button></td>
                                            </tr>
                                        `)
                                    }

                                } else {
                                    $('#hero-skin-modal tbody').append(`
                                        <tr style="text-align: center;" id="tr-${i}">
                                            <td>${i}</td>
                                            <td>false</td>
                                            <td><button class="active-skin btn btn-primary" data-hero-id=${heroId} data-index=${i}>Active</button></td>
                                        </tr>
                                    `)
                                }
                            }
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.log(textStatus, errorThrown);
                    }

                });
            })

            $('#hero-skin-modal').on('hidden.bs.modal', function (){
                $('#hero-skin-modal tbody').empty()
            })

            $(document).on('click', 'button.active-skin', function () {
                const heroId = $(this).data('hero-id')
                const index = $(this).data('index')
                const button = $(this)

                $.ajax({
                    url: "{{route('members.toggle-hero-skin', ['idUser'=> $member->member_id])}}",
                    type: "post",
                    data : {
                        'hero_id' : heroId,
                        'is_active': true,
                        'index': index,
                    },
                    dataType:'json',
                    success: function (response) {
                        if (response.status) {
                            button.removeClass()
                            button.addClass("deactive-skin btn btn-danger")
                            button.text('Deactive')
                            $(`#skin-input-${heroId}-${index}`).removeAttr('disabled')
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.log(textStatus, errorThrown);
                    }

                });
            })

            $(document).on('click', 'button.deactive-skin', function () {
                const heroId = $(this).data('hero-id')
                const index = $(this).data('index')
                const button = $(this)

                $.ajax({
                    url: "{{route('members.toggle-hero-skin', ['idUser'=> $member->member_id])}}",
                    type: "post",
                    data : {
                        'hero_id' : heroId,
                        'is_active': false,
                        'index': index,
                    },
                    dataType:'json',
                    success: function (response) {
                        if (response) {
                            button.removeClass()
                            button.addClass("active-skin btn btn-primary")
                            button.text('Active')
                            $(`#skin-input-${heroId}-${index}`).attr('disabled', true)
                            if (response.is_equip_default) {
                                $(`#skin-input-${heroId}-${0}`).prop('checked', true);
                                $(`#skin-input-${heroId}-${index}`).prop('checked', false);
                                $(`#tr-0`).children('td').eq(1).text(true);
                                $(`#tr-${index}`).children('td').eq(1).text(false);
                            }
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        console.log(textStatus, errorThrown);
                    }

                });
            })

            // TODO: Validate and create new string json hero item
            $("#save_item_btn").on("click", function(){
                var newData = {};
                let idtoken = $('#heroitemidhero').attr('data-id');
                for (let i = 1; i <= 6; ++i){
                    let data = {};

                    data.id  = JSON.parse($('#heroitem' + i + 'id').val());
                    data.exp = JSON.parse($('#heroitem' + i + 'exp').val());
                    data.equip = $('#heroitem' + i + 'equipspan').is(":checked");

                    if (data.equip)
                        $('#span-heroitem-index-' + idtoken + '-' + i).prop('checked', true);
                    else
                        $('#span-heroitem-index-' + idtoken + '-' + i).prop('checked', false);

                    newData[i] = data;
                }
                $('#heroitem-' + idtoken).val(JSON.stringify(newData));
                $('#openPopupHeroItem').modal('toggle');
                return false;
            });

            // TODO: Click Save Hero info Row
            $(document).on('click', '.saveHeroInfo', function(){
                var id = $(this).attr('data-id');
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: "{{route('save-hero')}}",
                    method: "POST",
                    data: {
                        member_id: $('#member_id').val(),
                        hero_id: $('#hero-id-'+ id).val(),
                        hero_star: $('#hero-star-'+ id).val(),
                        hero_fuse: $('#hero-fuse-'+ id).val(),
                        hero_level: $('#hero-level-'+ id).val(),
                        hero_exp: $('#hero-exp-'+ id).val(),
                        hero_item: $('#heroitem-'+ id).val(),
                        hero_skill: $('#skillhero-'+ id).val(),
                    },
                    success: function (data) {
                        alert("Hero data saved");
                    }
                });
                return false;
            });

            // TODO: Click add hero
            $(document).on('click', '.addNewHero', function(){
                var content = $('#TemplateCreateNewHero').html(),
                    token = generateToken();

                content = content.replace(/TOKEN/gmi, token);
                $('#listHero').append(content);
                return false;
            });

            // TODO: Click open popup Skill
            $(document).on('click', '.editSkillForm', function(){

                var id = $(this).attr('data-id'),
                    listSkill = $('#skillhero-' + id).val();
                try{
                    listSkill = JSON.parse(listSkill);
                    let tpl = $('#TemplateSkillRecord').html();
                    $('#listSkillPopup').html('');

                    for (let x in listSkill){
                        let rc = tpl;
                        rc = rc.replace(/SKILL_R?ID/gmi, x);
                        rc = rc.replace(/SKILL_LEVEL/gmi, listSkill[x]);

                        $('#listSkillPopup').append(rc);
                    }
                }catch(e){}
                $('#heroskillidhero').text(id);
                return false;
            });

            // TODO: Click delete Skill
            $(document).on('click', '.deleteSkill', function(){
                var $this = this;
                if (confirm("Are you sure delete skill of hero?")){
                    $('#record-hero-skill-' + $($this).attr('data-id')).remove();
                }
                return false;
            });

            // TODO: Click save form Hero Skill
            $("#save_skill_btn").on("click", function(){
                var listSkill = {};
                $('.heroSkillId').each(function(){
                    let level = $('.heroSkillLevel-' + $(this).attr('data-id')).val();
                    listSkill[$(this).val()] = JSON.parse(level);
                });

                if (Object.keys(listSkill).length){
                    let id = $('#heroskillidhero').text();
                    $('#skillhero-' + id).val(JSON.stringify(listSkill));
                    $('#openPopupHeroSkill').modal('toggle');
                }
                else{
                    alert("Skill Error!! Skills can not be blank.");
                }
                return false;
            });

            // TODO: Click add new skill
            $(document).on('click', '#addNewSkill', function(){
                var tk = generateToken(),
                    rc = $('#TemplateSkillRecord').html();

                rc = rc.replace(/SKILL_ID/gmi, tk);
                rc = rc.replace(/SKILL_RID/gmi, 1);
                rc = rc.replace(/SKILL_LEVEL/gmi, 1);

                $('#listSkillPopup').append(rc);
                return false;
            });

            // TODO: Click delete Hero
            $(document).on('click', '.deleteHero', function(){
                // var $this = this,
                //     doDeleteHero = function(){
                //         $($this).find('input').prop('disabled', false);
                //         validateSelectorFull($this);
                //     };
                // Alert.popup({
                //     title : 'Delete Hero',
                //     classes : 'warning',
                //     message : 'Are you sure delete hero?',
                //     btn : [
                //         {label : 'Delete Hero', color : 'orange', fn : doDeleteHero},
                //         {label : 'Cancel', color : 'orange', isFocus : true, fn : Alert.close}
                //     ]
                // });
                return false;
            });

        });
    </script>

@endpush