@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 Event "{{$event->name}}"</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        {!! Form::open(['action' => ['EventController@update',$id], 'method' => 'PUT', 'enctype' => 'multipart/form-data', 'class' => 'form-horizontal']) !!}
                        {!! Form::token() !!}
                        <div class="box-body">

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

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

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

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

                            <div class="form-group required">
                                {!! Form::label('days_keep  ', 'Day(s) keep  ', ['class' => 'col-sm-2 control-label']) !!}
                                <div class="col-sm-10">
                                    <input id="days_keep" type="text" name="days_keep" value="{{$event->day_keep_after_end}}" class="form-control"
                                           placeholder="" required="required">
                                </div>
                            </div>

                            <div class="form-group required">
                                {!! Form::label('begin  ', 'Begin  ', ['class' => 'col-sm-2 control-label']) !!}
                                <div class="col-sm-6">
                                    <input id="date_time" type="date" name="day_begin" value="{{$event->date_begin}}" class="form-control"
                                           placeholder="" required="required">
                                </div>
                                <div class="col-sm-2">
                                    <input id="" type="number" name="hours_begin" min="0" max="24" value="{{$event->hour_begin}}" class="form-control"
                                           placeholder="" required="required">
                                </div>
                                <div class="col-sm-2">
                                    <input id="" type="number" name="minute_begin" min="0" max="60" value="{{$event->minute_begin}}" class="form-control"
                                           placeholder="" required="required">
                                </div>
                            </div>

                            <div class="form-group required">
                                {!! Form::label('end  ', 'End ', ['class' => 'col-sm-2 control-label']) !!}
                                <div class="col-sm-6">
                                    <input id="" type="date" name="day_end" value="{{$event->date_end}}" class="form-control" placeholder="" required="required">
                                </div>
                                <div class="col-sm-2">
                                    <input id="" type="number" name="hours_end" min="0" max="24" value="{{$event->hour_end}}" class="form-control"
                                           placeholder="" required="required">
                                </div>
                                <div class="col-sm-2">
                                    <input id="" type="number" name="minute_end" min="0" max="60" value="{{$event->minute_end}}" class="form-control"
                                           placeholder="" required="required">
                                </div>
                            </div>

                            <div class="form-group required">
                                {!! Form::label('attach', 'Content ', ['class' => 'col-sm-2 control-label']) !!}
                                <div class="col-sm-10">
                                    <textarea class="form-control" rows="5" id="content" name="content">{{$event->content}}</textarea>
                                    {{--{!! Form::textarea('attach', $event->content, ['rows' => '5'] , ['class' => 'form-control','required' =>'required']) !!}--}}
                                </div>
                            </div>

                            <div class="form-group required">
                                {!! Form::label('attach', 'Note', ['class' => 'col-sm-2 control-label']) !!}
                                <div class="col-sm-10">
                                    <textarea class="form-control" rows="5" id="note" name="note">{{$event->note}}</textarea>
                                    {{--{!! Form::textarea('note', $event->note, ['rows' => '5'] , ['class' => 'form-control','required' =>'required']) !!}--}}
                                </div>
                            </div>

                            <div class="form-group">
                                {!! Form::label('button', 'Button(s)', ['class' => 'col-sm-2 control-label']) !!}
                                <div class="col-sm-6">
                                    <div class="packageForm">
                                        <div class="packageBar">
                                            <a href="#" class="addButton">[Add]</a>
                                        </div>
                                        <div class="list-button">
                                                                                    </div>
                                    </div>
                                </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="addFullPackage" id="" name="">[Add]</a>
                                        </div>
                                        <div class="list-package">
                                                                                    </div>
                                    </div>
                                </div>
                            </div>

                            <!-- /.box-body -->
                            <div class="box-footer">
                                <a href="{{route('events.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">
                    <a href="#" class="removeFullPackage">[ - ]</a>
                    <span>Package</span>
                    <span class="packageid" data-id="PACKAGEID">#PACKAGEID</span>
                </div>
            </div>
            <table class="table">
                <tr>
                    <th>
                        <div>
                            <label>Name</label>
                            <input type="text" value="" name="reward[PKTOKEN][name]" required="required"/>
                        </div>
                    </th>
                    <th>
                        <div>
                            <label>Require</label>
                            <input type="text" value="1" name="reward[PKTOKEN][require]" required="required"/>
                        </div>
                    </th>

                </tr>
                <tr>
                    <td class="col-sm-4">
                        <div class="packageForm">
                            <div class="packageBar">
                                <a href="#" class="addItem" data-ptoken="PKTOKEN">[+] Item</a>
                            </div>
                        </div>
                    </td>
                    <td class="col-sm-4">
                        <div class="packageForm">
                            <div class="packageBar">
                                <a href="#" class="addHero" data-ptoken="PKTOKEN">[+] Hero</a>
                            </div>
                        </div>
                    </td>
                    <td class="col-sm-4">
                        <div class="packageForm">
                            <div class="packageBar">
                                <a href="#" class="addGem" data-ptoken="PKTOKEN">[+] Gem</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="TemplateHero">
        <div class="hero">
            <div class="head-hero">
                <div class="left-hero">
                    <a href="#" class="removeHero">[ - ]</a>
                </div>
                <div class="clear"></div>
            </div>
            <div class="body-hero">
                <div class="HeroInfo">
                    <ul>
                        <li>
                            <div>
                                <label>Hero</label>
                                <input type="number" value="" min="1" name="reward[PKTOKEN][hero][]" 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/x-handlebars-template" id="TemplateButton">
        <div class="button">
            <div class="head-button">
                <div class="left-button">
                    <a href="#" class="removeButton">[ - ]</a>
                </div>
                <div class="clear"></div>
            </div>
            <div class="body-button">
                <div class="ButtonInfo">
                    <ul>
                        <div>
                            <label>Name</label>
                            <input type="text" value="" name="btn_name[]" required="required"/>
                            <label style="margin-left: 30px"> Function</label>
                            <input type="text" value="" name="btn_func[]" required="required"/>
                        </div>
                    </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 require = 'require' + i ;
                    var hero    = 'hero' + i ;
                    var citems  = 'citems' + i;
                    var cgems   = 'cgems' + i;
                    var add_item   = 'add_item' + i;
                    var add_hero   = 'add_hero' + i;
                    var add_gem    = 'add_gem' + i;

                    $("input[name="+name+"]").attr('name', 'reward['+token+'][name]');
                    $("input[name="+require+"]").attr('name', 'reward['+token+'][require]');
                    $("input[name="+hero+"]").attr('name', 'reward['+token+'][hero][]');
                    $("a[name="+add_item+"]").attr('data-ptoken', token);
                    $("a[name="+add_hero+"]").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', '.addFullPackage', 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-package');
                $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', '.addHero', function(){
                var content = $('#TemplateHero').html();
                var ptoken = $(this).attr('data-ptoken');
                content = content.replace(/PKTOKEN/g, ptoken);
                $(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;
            });

            $(document).on('click', '.addButton', function(){
                var content = $('#TemplateButton').html();
                var $list = $('.list-button');
                $list.append(content);

                var height = $list[0].scrollHeight;
                $list.scrollTop(height);

                return false;
            });

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

        });
    </script>

@endpush