@extends('adminlte::page')
@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">Weekly Manager</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        {!! Form::open(['action' => ['MemberController@saveMemberWeekly'], 'method' => 'POST', 'enctype' => 'multipart/form-data', 'class' => 'form-horizontal']) !!}
                        {!! Form::token() !!}
                        <div class="box-body">
                            <input type="text" name="member_id" value="{{$member->member_id}}" hidden>
                            <label>TYPE: Number</label>
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>Weekly name</th>
                                        <th>Weekly Data</th>
                                    </tr>
                                </thead>
                                <tbody id="listWeeklyNumber">
                                    @foreach($type_number as $value)
                                        <tr id="weekly-{{$value['name']}}">
                                            <td class="col-sm-2">
                                                <a href="#" id="removeFullWeekly" data-name="{{$value['name']}}">
                                                    <i class="fa fa-times" style="color: red" aria-hidden="true"></i>
                                                </a>
                                            </td>
                                            <td class="col-sm-4">
                                                <input type="text" name="weekly[{{$value['name']}}][name]" value="{{$value['name']}}" placeholder="Weekly name here" minlength="5" maxlength="50" required/>
                                            </td>
                                            <td class="col-sm-4">
                                                <input type="number" name="weekly[{{$value['name']}}][value]" value="{{$value['value']}}" min="1" required/>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            <div>
                                <button class="btn btn-success" id="addNumberWeekly">Add</button>
                            </div><br>

                            <label>TYPE: List</label>
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>Weekly name</th>
                                        <th>Weekly Data</th>
                                    </tr>
                                </thead>
                                <tbody id="listWeeklyList">
                                @foreach($type_list as $value)
                                    <tr id="weekly-{{$value['name']}}">
                                        <td class="col-sm-2">
                                            <a href="#" id="removeFullWeekly" data-name="{{$value['name']}}">
                                                <i class="fa fa-times" style="color: red" aria-hidden="true"></i>
                                            </a>
                                        </td>
                                        <td class="col-sm-4">
                                            <input type="text" name="weekly[{{$value['name']}}][name]" value="{{$value['name']}}" placeholder="Weekly name here" minlength="5" maxlength="50" />
                                        </td>
                                        <td class="col-sm-6">
                                            <table class="table">
                                                <thead>
                                                <tr>
                                                    <th>ID</th>
                                                    <th>Times</th>
                                                    <th></th>
                                                </tr>
                                                </thead>
                                                <tbody id="weekly-sub-{{$value['name']}}">
                                                    @foreach($value['value'] as $sub_id => $sub_data)
                                                    <tr id="weekly-id-{{$value['name']}}-{{$sub_id}}">

                                                        <td>
                                                            <input type="number" name="weekly[{{$value['name']}}][{{$sub_id}}][id]" value="{{$sub_id}}" min="1" required/>
                                                        </td>
                                                        <td>
                                                            <input type="number" name="weekly[{{$value['name']}}][{{$sub_id}}][times]" value="{{$sub_data}}" min="1" required/>
                                                        </td>
                                                        <td>
                                                            <a href="#" id="removeIdWeekly" data-name="{{$value['name']}}" data-id="{{$sub_id}}">
                                                                <i class="fa fa-times" style="color: blue" aria-hidden="true"></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                            <div>
                                                <button id="addListWeeklySub" data-name="{{$value['name']}}">Add</button>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach

                                </tbody>
                            </table>
                            <div>
                                <button class="btn btn-success" id="addListWeekly">Add</button>
                            </div><br>

                            <div class="clear"></div>

                            <div class="box-footer">
                                <a href="{{route('index-members',['id' =>$member->member_server])}}" 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="TemplateWeeklyNumber">
        <tr id="weekly-TOKEN">
            <td class="col-sm-2">
                <a href="#" id="removeFullWeekly" data-name="TOKEN">
                    <i class="fa fa-times" style="color: red" aria-hidden="true"></i>
                </a>
            </td>
            <td class="col-sm-4">
                <input type="text" name="weekly[TOKEN][name]" value="" placeholder="Weekly name here" minlength="5" maxlength="50" required/>
            </td>
            <td class="col-sm-4">
                <input type="number" name="weekly[TOKEN][value]" value="" min="1" required/>
            </td>
        </tr>
    </script>

    <!-- TEMPLATE :: Weekly List -->
    <script type="text/x-handlebars-template" id="TemplateWeeklyList">
        <tr id="weekly-TOKEN">
            <td class="col-sm-2">
                <a href="#" id="removeFullWeekly" data-name="TOKEN">
                    <i class="fa fa-times" style="color: red" aria-hidden="true"></i>
                </a>
            </td>
            <td class="col-sm-4">
                <input type="text" name="weekly[TOKEN][name]" value="" placeholder="Weekly name here" minlength="5" maxlength="50" />
            </td>
            <td class="col-sm-6">
                <table class="table">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>Times</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody id="weekly-sub-TOKEN">
                    <tr id="weekly-id-TOKEN-TOKEN">
                        <td>
                            <input type="number" name="weekly[TOKEN][TOKEN][id]" value="" min="1" required/>
                        </td>
                        <td>
                            <input type="number" name="weekly[TOKEN][TOKEN][times]" value="" min="1" required/>
                        </td>
                        <td>
                            <a href="#" id="removeIdWeekly" data-name="TOKEN" data-id="TOKEN">
                                <i class="fa fa-times" style="color: blue" aria-hidden="true"></i>
                            </a>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <div>
                    <button id="addListWeeklySub" data-name="TOKEN">Add</button>
                </div>
            </td>
        </tr>
    </script>

    <!-- TEMPLATE :: Weekly List Sub -->
    <script type="text/x-handlebars-template" id="TemplateWeeklyListSub">
        <tr id="weekly-id-NAME-TOKEN">
            <td>
                <input type="number" name="weekly[NAME][TOKEN][id]" value="" min="1" required/>
            </td>
            <td>
                <input type="number" name="weekly[NAME][TOKEN][times]" value="" min="1" required/>
            </td>
            <td>
                <a href="#" id="removeIdWeekly" data-name="NAME" data-id="TOKEN">
                    <i class="fa fa-times" style="color: blue" aria-hidden="true"></i>
                </a>
            </td>
        </tr>
    </script>

    <!-- JAVASCRIPT :: Handling event Item page -->
    <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 remove full row weekly
            $(document).on('click', '#removeFullWeekly', function(){
                $('#weekly-' + $(this).attr('data-name')).remove();
                return false;
            });

            // TODO: Click remove id of weekly
            $(document).on('click', '#removeIdWeekly', function(){
                $('#weekly-id-' + $(this).attr('data-name') + '-' + $(this).attr('data-id')).remove();
                return false;
            });

            // TODO: Click add weekly number
            $(document).on('click', '#addNumberWeekly', function(e){
                e.preventDefault();
                var token   = generateToken();
                var content = $('#TemplateWeeklyNumber').html();
                content = content.replace(/TOKEN/g, token);

                $('#listWeeklyNumber').append(content);
                return false;
            });

            // TODO: Click add weekly list
            $(document).on('click', '#addListWeekly', function(e){
                e.preventDefault();
                var token   = generateToken();
                var content = $('#TemplateWeeklyList').html();
                content = content.replace(/TOKEN/g, token);

                $('#listWeeklyList').append(content);
                return false;
            });

            // TODO: Click add weekly list sub
            $(document).on('click', '#addListWeeklySub', function(e){
                e.preventDefault();
                var name = $(this).attr('data-name'),
                    token = generateToken(),
                    content = $('#TemplateWeeklyListSub').html();

                content = content.replace(/NAME/g, name);
                content = content.replace(/TOKEN/g, token);

                $('#weekly-sub-' + name).append(content);
                return false;
            });
        });
    </script>


@endpush