@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">
            @include('layouts.message')
            <div class="col-xs-12">
                <div class="box  box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">Create Purchase Package</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        {!! Form::open(['action' => ['PurchasePackageController@store'], 'method' => 'POST', '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 id="name" type="text" name="name" value="" class="form-control"
                                           placeholder="" required="required">
                                </div>
                            </div>

                            <div class="form-group required">
                                {!! Form::label('type', 'Type', ['class' => 'col-sm-2 control-label']) !!}
                                <div class="col-sm-10">
                                    <select id="type" name="type" class="form-control" required="required">
                                        @foreach(config("constants.purchase_package_type") as $key => $type)
                                            <option value="{{$key}}">{{$type}}</option>
                                        @endforeach
                                    </select>
                                </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">
                                {!! 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('purchase-packages.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 class="form-control" type="text" value="" name="reward[PKTOKEN][name]" required="required"/>
                        </div>
                    </th>
                    <th>
                        <div>
                            <label>Limit</label>
                            <input class="form-control" type="number" step="1" value="1" name="reward[PKTOKEN][limit]" required="required"/>
                        </div>
                    </th>
                    <th></th>
                </tr>
                <tr>
                    <th>
                        <div>
                            <label>Price</label>
                            <input class="form-control" type="number" step="0.01" value="" name="reward[PKTOKEN][price]" required="required"/>
                        </div>
                    </th>
                    <th>
                        <div>
                            <label>VIP Exp</label>
                            <input class="form-control" type="number" step="1" value="" name="reward[PKTOKEN][vip_exp]" required="required"/>
                        </div>
                    </th>
                </tr>
            </table>
            <table class="table">
                <thead>
                <tr>
                    <th>Item</th>
                    <th>Hero</th>
                    <th>Gem</th>
                </tr>
                </thead>

                <tbody>
                <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>
                </tbody>
            </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/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;
            });

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

        });
    </script>

@endpush