@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">Create Event</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        {!! Form::open(['action' => ['EventController@store'], 'method' => 'POST', '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="" 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="" 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="" 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="" 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="" 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="" class="form-control"
                                           placeholder="" required="required">
                                </div>
                                <div class="col-sm-2">
                                    <input id="" type="number" name="hours_begin" min="0" max="24" value="" class="form-control"
                                           placeholder="" required="required">
                                </div>
                                <div class="col-sm-2">
                                    <input id="" type="number" name="minute_begin" min="0" max="60" value="" 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="" class="form-control" placeholder="" required="required">
                                </div>
                                <div class="col-sm-2">
                                    <input id="" type="number" name="hours_end" min="0" max="24" value="" class="form-control"
                                           placeholder="" required="required">
                                </div>
                                <div class="col-sm-2">
                                    <input id="" type="number" name="minute_end" min="0" max="60" value="" 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"></textarea>
                                </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"></textarea>
                                </div>
                            </div>

                            <div class="form-group">
                                {!! Form::label('button', 'Button(s)', ['class' => 'col-sm-2 control-label']) !!}
                                <div class="col-sm-10">
                                    <div class="packageForm">
                                        <div>
                                            <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('.', '');
        }

        // 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