@extends('adminlte::page')

@section('title', 'HeroLegend')

@section('content_header')
    <!-- <h1>Dashboard</h1> -->
@stop

@section('content')
    <div class="row">
        <div class="col-md-12">
            @if(Session::has('message'))
                <div class="alert alert-success">{{Session::get('message')}}</div>
            @endif
        </div>

        <div class="col-md-12">
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">Quest Manager ( Member: {{$member->member_name}} [ ID: {{$member->member_id}} ])</h3>
                </div>
                <div class="box-body">
                    <a href="{{route('index-members', ['id' =>$member->member_server])}}"  title="Back" style="float: left;">
                        <button class="btn btn-warning btn-sm"><i class="fa fa-arrow-left" aria-hidden="true"></i> Back</button>
                    </a>

                    <br><br>

                    <form action="{{ URL::action('ServerController@updateMemberQuest') }}" method="POST">
                        {{ csrf_field() }}
                        <div class="table-responsive">
                            <table class="table table-borderless" style="text-align: center">
                                <tbody id="list_quest">
                                @foreach($quests as $value)
                                    <tr>
                                        <td>Quest ID</td>
                                        <td>
                                            <input style="border:none" type="number" name="quest_id[]" value="{{$value}}">
                                        </td>
                                        <td>
                                            <a href="#" id="remove_quest" style="color:red">
                                                <span>Remove</span>
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>

                        <div style="margin-left: 40%">
                            <input type="text" name="member_id" value="{{$member->member_id}}" hidden>
                            <button class="btn btn-primary btn-sm" id="add_quest">Add Quest</button>
                            <button class="btn btn-success btn-sm" style="margin-left: 10px">SAVE</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@stop

@push('js')
    <script type="text/x-handlebars-template" id="template_quest">
        <tr>
            <td>Quest ID</td>
            <td>
                <input style="border:none" type="number" name="quest_id[]" value="1">
            </td>
            <td>
                <a href="#" id="remove_quest" style="color:red">
                    <span>Remove</span>
                </a>
            </td>
        </tr>
    </script>

    <script type="text/javascript">
        $(document).ready(function(){
            $(document).on('click', '#add_quest', function(e){
                e.preventDefault();
                var content = $('#template_quest').html();
                $('#list_quest').append(content);
                $(document).scrollTop($(document).height());
                return false;
            });

            $(document).on('click', '#remove_quest', function(){
                $(this).parent().parent().remove();
                return false;
            });
        });
    </script>

@endpush