@extends('adminlte::page')
@section('content')
    <!-- content -->
    <section class="content" style="padding: 40px;">
        <div class="row">
            @if (Session::has('message'))
                <div class="alert alert-success alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>
                    <p><i class="icon fa fa-check"></i>{{Session::get('message')}}</p>
                </div>
            @endif

            @if (Session::has('error'))
                <div class="alert alert-error alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true"></button>
                    <p><i class="icon fa fa-warning"></i>{{Session::get('error')}}</p>
                </div>
            @endif

            <div class="col-xs-12">
                <div class="box  box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">Daily Manager</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        {!! Form::open(['action' => ['MemberController@saveMemberDaily'], '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>Daily name</th>
                                        <th>Daily Data</th>
                                    </tr>
                                </thead>
                                <tbody id="listDailyNumber">
                                    @foreach($type_number as $value)
                                        <tr id="daily-{{$value['name']}}">
                                            <td class="col-sm-2">
                                                <a href="#" id="removeFullDaily" 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="daily[{{$value['name']}}][name]" value="{{$value['name']}}" placeholder="Daily name here" minlength="5" maxlength="50" required/>
                                            </td>
                                            <td class="col-sm-4">
                                                <input type="number" name="daily[{{$value['name']}}][value]" value="{{$value['value']}}" min="1" required/>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            <div>
                                <button class="btn btn-success" id="addNumberDaily">Add</button>
                            </div><br>

                            <label>TYPE: List</label>
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>Daily name</th>
                                        <th>Daily Data</th>
                                    </tr>
                                </thead>
                                <tbody id="listDailyList">
                                @foreach($type_list as $value)
                                    <tr id="daily-{{$value['name']}}">
                                        <td class="col-sm-2">
                                            <a href="#" id="removeFullDaily" 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="daily[{{$value['name']}}][name]" value="{{$value['name']}}" placeholder="Daily 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="daily-sub-{{$value['name']}}">
                                                    @foreach($value['value'] as $sub_id => $sub_data)
                                                    <tr id="daily-id-{{$value['name']}}-{{$sub_id}}">

                                                        <td>
                                                            <input type="number" name="daily[{{$value['name']}}][{{$sub_id}}][id]" value="{{$sub_id}}" min="1" required/>
                                                        </td>
                                                        <td>
                                                            <input type="number" name="daily[{{$value['name']}}][{{$sub_id}}][times]" value="{{$sub_data}}" min="1" required/>
                                                        </td>
                                                        <td>
                                                            <a href="#" id="removeIdDaily" 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="addListDailySub" data-name="{{$value['name']}}">Add</button>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach

                                </tbody>
                            </table>
                            <div>
                                <button class="btn btn-success" id="addListDaily">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="TemplateDailyNumber">
        <tr id="daily-TOKEN">
            <td class="col-sm-2">
                <a href="#" id="removeFullDaily" 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="daily[TOKEN][name]" value="" placeholder="Daily name here" minlength="5" maxlength="50" required/>
            </td>
            <td class="col-sm-4">
                <input type="number" name="daily[TOKEN][value]" value="" min="1" required/>
            </td>
        </tr>
    </script>

    <!-- TEMPLATE :: Daily List -->
    <script type="text/x-handlebars-template" id="TemplateDailyList">
        <tr id="daily-TOKEN">
            <td class="col-sm-2">
                <a href="#" id="removeFullDaily" 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="daily[TOKEN][name]" value="" placeholder="Daily 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="daily-sub-TOKEN">
                    <tr id="daily-id-TOKEN-TOKEN">
                        <td>
                            <input type="number" name="daily[TOKEN][TOKEN][id]" value="" min="1" required/>
                        </td>
                        <td>
                            <input type="number" name="daily[TOKEN][TOKEN][times]" value="" min="1" required/>
                        </td>
                        <td>
                            <a href="#" id="removeIdDaily" 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="addListDailySub" data-name="TOKEN">Add</button>
                </div>
            </td>
        </tr>
    </script>

    <!-- TEMPLATE :: Daily List Sub -->
    <script type="text/x-handlebars-template" id="TemplateDailyListSub">
        <tr id="daily-id-NAME-TOKEN">
            <td>
                <input type="number" name="daily[NAME][TOKEN][id]" value="" min="1" required/>
            </td>
            <td>
                <input type="number" name="daily[NAME][TOKEN][times]" value="" min="1" required/>
            </td>
            <td>
                <a href="#" id="removeIdDaily" 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 daily
            $(document).on('click', '#removeFullDaily', function(){
                $('#daily-' + $(this).attr('data-name')).remove();
                return false;
            });

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

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

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

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

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

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

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

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


@endpush