@extends('adminlte::page')

@section('css')
    <style>
        #content, #attach {
            width: 100%;
        }

    </style>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
@stop
@section('content')
    <!-- content -->
    <section class="content" style="padding: 40px;">
        <div class="row">
            <div class="col-xs-12">
                <div class="box  box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">Edit Reward "{{$id}}"</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        {!! Form::open(['action' => ['RewardController@update',$id], 'method' => 'PUT', 'enctype' => 'multipart/form-data', 'class' => 'form-horizontal']) !!}
                        {!! Form::token() !!}
                        <div class="box-body">

                            <div class="form-group required">
                                {!! Form::label('name', 'Name', ['class' => 'col-sm-2 control-label']) !!}
                                <div class="col-sm-10">
                                    <input type="text" name="reward_name" id="reward_name" class="form-control" value="{{$id}}" required="required">
                                </div>
                            </div>

                            <div class="form-group">
                                {!! Form::label('reward', 'Rewards ', ['class' => 'col-sm-2 control-label']) !!}
                                <div class="col-sm-10">
                                    <div class="packageForm">
                                        <div class="packageBar">
                                            <a href="#" class="addReward">[Add]</a>
                                        </div>
                                        <div class="list-reward">
                                                                                    </div>
                                    </div>
                                </div>
                            </div>

                            <!-- /.box-body -->
                            <div class="box-footer">
                                <a href="{{route('rewards.index')}}" class="btn btn-default">Cancel</a>
                                <button type="submit" class="btn btn-info pull-right">Submit</button>
                            </div>
                            <!-- /.box-footer -->
                            {!! Form::close() !!}
                        </div>
                        <!-- /.box-body -->
                    </div>
                </div>
            </div>
        </div>
    </section>

@stop

@push('js')

    <script type="text/x-handlebars-template" id="TemplateFullPackage">
        <div class="package">
            <div class="head-package">
                <div class="left-package pull-right">
                    <a href="#" style="color: red" class="removeFullPackage">&#10006 Remove</a>
                    <span class="packageid" data-id="PACKAGEID"></span>
                </div>
            </div>
            <table class="table">
                <tr>
                    <th>
                        <div>
                            <label>Rank</label>
                            <input type="text" value="" name="reward[PKTOKEN][rank]" required="required"/>
                        </div>
                    </th>
                </tr>
                <tr>
                    <td class="col-sm-8">
                        <div class="packageForm">
                            <div class="packageBar">
                                <a href="#" class="addGem" data-ptoken="PKTOKEN">[+] Gems</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="col-sm-8">
                        <div class="packageForm">
                            <div class="packageBar">
                                <a href="#" class="addItem" data-ptoken="PKTOKEN">[+] Items</a>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </script>

    <script type="text/x-handlebars-template" id="TemplateItem">
        <div class="item">
            <div class="head-item">
                <div class="left-item">
                    <a href="#" class="removeItem">[ - ]</a>
                </div>
                <div class="clear"></div>
            </div>
            <div class="body-item">
                <div class="ItemInfo">
                    <ul>
                        <li>
                            <div>
                                <label>Item</label>
                                <input type="text" value="" name="reward[PKTOKEN][items][RWTOKEN][id]" required="required"/>
                            </div>
                        </li>
                        <li>
                            <div>
                                <label>Num</label>
                                <input type="number" value="1" min="1" name="reward[PKTOKEN][items][RWTOKEN][number]" required="required"/>
                            </div>
                        </li>
                    </ul>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
    </script>

    <script type="text/x-handlebars-template" id="TemplateGem">
        <div class="gem">
            <div class="head-gem">
                <div class="left-gem">
                    <a href="#" class="removeGem">[ - ]</a>
                </div>
                <div class="clear"></div>
            </div>
            <div class="body-gem">
                <div class="GemInfo">
                    <ul>
                        <li>
                            <div>
                                <select class="validateGem" name="reward[PKTOKEN][gem][RWTOKEN][name]">
                                    <option>member_gold</option>
                                    <option>member_diamond</option>
                                    <option>arena_gem</option>
                                    <option>hall_legend_gem</option>
                                    <option>super_arena_gem</option>
                                </select>
                                <input type="number" value="1" min="1" name="reward[PKTOKEN][gem][RWTOKEN][number]" required="required"/>
                            </div>
                        </li>
                    </ul>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
    </script>

    <script type="text/javascript">

        $(document).ready(function(){

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

            function validateToken(){
                var num = $('.package').length;

                for(var i=1; i<num+1; i++){
                    var token = generateToken();
                    var name    = 'reward' + i ;
                    var citems  = 'citems' + i;
                    var cgems   = 'cgems' + i;
                    var add_item   = 'add_item' + i;
                    var add_gem    = 'add_gem' + i;

                    $("input[name="+name+"]").attr('name', 'reward['+token+'][rank]');
                    $("a[name="+add_item+"]").attr('data-ptoken', token);
                    $("a[name="+add_gem+"]").attr('data-ptoken', token);

                    for (var j=1;j<=$("input[name="+citems+"]").val();j++){
                        var items    = 'items' + i + j;
                        var itemnum  = 'itemnum' + i + j;
                        var rtoken   = generateToken();

                        $("input[name="+items+"]").attr('name', 'reward['+token+'][items]['+ rtoken +'][id]');
                        $("input[name="+itemnum+"]").attr('name', 'reward['+token+'][items]['+ rtoken +'][number]');
                    }

                    for (var j=1;j<=$("input[name="+cgems+"]").val();j++){
                        var gems     = 'gems' + i + j;
                        var gemnum   = 'gemnum' + i + j;
                        var rtoken   = generateToken();

                        $("select[name="+gems+"]").attr('name', 'reward['+token+'][gem]['+ rtoken +'][name]');
                        $("input[name="+gemnum+"]").attr('name', 'reward['+token+'][gem]['+ rtoken +'][number]');
                    }
                }
            }

            validateToken();

            // TODO: Click add full package
            $(document).on('click', '.addReward', function(){
                var numId   = $('.package').length + 1;
                var token   = generateToken();
                var content = $('#TemplateFullPackage').html();

                content = content.replace(/PACKAGEID/g, numId);
                content = content.replace(/PKTOKEN/g, token);

                var $list = $('.list-reward');
                $list.append(content);
                var height = $list[0].scrollHeight;
                $list.scrollTop(height);

                return false;
            });

            // TODO: Click add item
            $(document).on('click', '.addItem', function(){
                var content = $('#TemplateItem').html();
                var ptoken = $(this).attr('data-ptoken');
                var rtoken = generateToken();
                content = content.replace(/PKTOKEN/g, ptoken);
                content = content.replace(/RWTOKEN/g, rtoken);
                $(this).parent().append(content);

                return false;
            });

            $(document).on('click', '.addGem', function(){
                var content = $('#TemplateGem').html();
                var ptoken = $(this).attr('data-ptoken');
                var rtoken = generateToken();
                content = content.replace(/PKTOKEN/g, ptoken);
                content = content.replace(/RWTOKEN/g, rtoken);
                $(this).parent().append(content);

                return false;
            });

            // TODO: Click remove
            $(document).on('click', '.removeFullPackage, .removeItem, .removeGem', function(){
                $(this).parent().parent().parent().remove();
                return false;
            });

        });
    </script>

@endpush