@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 Mission</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        {!! Form::open(['action' => ['MissionController@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('id', 'ID', ['class' => 'col-sm-2 control-label']) !!}
                                <div class="col-sm-10">
                                    <input id="id" type="text" name="id" value="" class="form-control"
                                           placeholder="" required="required">
                                </div>
                            </div>
							
                            <div class="form-group required">
                                {!! Form::label('attach', 'Comment', ['class' => 'col-sm-2 control-label']) !!}
                                <div class="col-sm-10">
                                    <textarea class="form-control" rows="5" id="comment" name="comment"></textarea>
                                </div>
                            </div>							
							
                            <div class="form-group required">
                                {!! Form::label('', 'Day of week', ['class' => 'col-sm-2 control-label']) !!}
                                {!! Form::label('', 'Open Time', ['class' => 'col-sm-2 control-label']) !!}
                                {!! Form::label('', 'Close Time', ['class' => 'col-sm-4 control-label']) !!}
                                {!! Form::label('', 'Monster ID', ['class' => 'col-sm-3 control-label']) !!}
                            </div>

                            <div class="form-group required">
                                {!! Form::label('sunday', 'Sunday', ['class' => 'col-sm-2 control-label']) !!}
                                <div>
                                    <input type="checkbox" name="sunday_check" value="true">
                                </div>
                                <div class="col-sm-2">
                                    <input id="sunday_shour" type="number" name="sunday_shour" min="0" max="23" value="5" class="form-control"
                                           placeholder="Open Hour" required="required">
                                </div>
                                <div class="col-sm-2">
                                    <input id="sunday_sminute" type="number" name="sunday_sminute" min="0" max="59" value="0" class="form-control"
                                           placeholder="Open Minute" required="required">
                                </div>
                                <div class="col-sm-2">
                                    <input id="sunday_ehour" type="number" name="sunday_ehour" min="0" max="23" value="22" class="form-control"
                                           placeholder="Close Hour" required="required">
                                </div>
                                <div class="col-sm-2">
                                    <input id="sunday_eminute" type="number" name="sunday_eminute" min="0" max="59" value="0" class="form-control"
                                           placeholder="Close Minute" required="required">
                                </div>
                                <div class="col-sm-2">
                                    <input id="sunday_monster" type="number" name="sunday_monster" min="1" max="1000" value="" class="form-control"
                                           placeholder="Monster ID" required="required">
                                </div>
                            </div>

                            <div class="form-group required">
                                {!! Form::label('monday', 'Monday', ['class' => 'col-sm-2 control-label']) !!}
                                <div>
									<input type="checkbox" name="monday_check" value="true"> 					
                                </div>								
                                <div class="col-sm-2">
                                    <input id="monday_shour" type="number" name="monday_shour" min="0" max="23" value="5" class="form-control"
                                           placeholder="Open Hour" required="required">
                                </div>
                                <div class="col-sm-2">
                                    <input id="monday_sminute" type="number" name="monday_sminute" min="0" max="59" value="0" class="form-control"
                                           placeholder="Open Minute" required="required">
                                </div>								
                                <div class="col-sm-2">
                                    <input id="monday_ehour" type="number" name="monday_ehour" min="0" max="23" value="22" class="form-control"
                                           placeholder="Close Hour" required="required">
                                </div>
                                <div class="col-sm-2">
                                    <input id="monday_eminute" type="number" name="monday_eminute" min="0" max="59" value="0" class="form-control"
                                           placeholder="Close Minute" required="required">
                                </div>								
                                <div class="col-sm-2">
                                    <input id="monday_monster" type="number" name="monday_monster" min="1" max="1000" value="" class="form-control"
                                           placeholder="Monster ID" required="required">
                                </div>
                            </div>
							
                            <div class="form-group required">
                                {!! Form::label('tuesday', 'Tuesday', ['class' => 'col-sm-2 control-label']) !!}
                                <div>
									<input type="checkbox" name="tuesday_check" value="true"> 					
                                </div>									
                                <div class="col-sm-2">
                                    <input id="tuesday_shour" type="number" name="tuesday_shour" min="0" max="23" value="5" class="form-control"
                                           placeholder="Open Hour" required="required">
                                </div>
                                <div class="col-sm-2">
                                    <input id="tuesday_sminute" type="number" name="tuesday_sminute" min="0" max="59" value="0" class="form-control"
                                           placeholder="Open Minute" required="required">
                                </div>								
                                <div class="col-sm-2">
                                    <input id="tuesday_ehour" type="number" name="tuesday_ehour" min="0" max="23" value="22" class="form-control"
                                           placeholder="Close Hour" required="required">
                                </div>
                                <div class="col-sm-2">
                                    <input id="tuesday_eminute" type="number" name="tuesday_eminute" min="0" max="59" value="0" class="form-control"
                                           placeholder="Close Minute" required="required">
                                </div>								
                                <div class="col-sm-2">
                                    <input id="tuesday_monster" type="number" name="tuesday_monster" min="1" max="1000" value="" class="form-control"
                                           placeholder="Monster ID" required="required">
                                </div>
                            </div>							
							
                            <div class="form-group required">
                                {!! Form::label('wednesday', 'Wednesday', ['class' => 'col-sm-2 control-label']) !!}
                                <div>
									<input type="checkbox" name="wednesday_check" value="true"> 					
                                </div>									
                                <div class="col-sm-2">
                                    <input id="wednesday_shour" type="number" name="wednesday_shour" min="0" max="23" value="5" class="form-control"
                                           placeholder="Open Hour" required="required">
                                </div>
                                <div class="col-sm-2">
                                    <input id="wednesday_sminute" type="number" name="wednesday_sminute" min="0" max="59" value="0" class="form-control"
                                           placeholder="Open Minute" required="required">
                                </div>								
                                <div class="col-sm-2">
                                    <input id="wednesday_ehour" type="number" name="wednesday_ehour" min="0" max="23" value="22" class="form-control"
                                           placeholder="Close Hour" required="required">
                                </div>
                                <div class="col-sm-2">
                                    <input id="wednesday_eminute" type="number" name="wednesday_eminute" min="0" max="59" value="0" class="form-control"
                                           placeholder="Close Minute" required="required">
                                </div>								
                                <div class="col-sm-2">
                                    <input id="wednesday_monster" type="number" name="wednesday_monster" min="1" max="1000" value="" class="form-control"
                                           placeholder="Monster ID" required="required">
                                </div>
                            </div>	
							
                            <div class="form-group required">
                                {!! Form::label('thursday', 'Thursday', ['class' => 'col-sm-2 control-label']) !!}
                                <div>
									<input type="checkbox" name="thursday_check" value="true"> 					
                                </div>									
                                <div class="col-sm-2">
                                    <input id="thursday_shour" type="number" name="thursday_shour" min="0" max="23" value="5" class="form-control"
                                           placeholder="Open Hour" required="required">
                                </div>
                                <div class="col-sm-2">
                                    <input id="thursday_sminute" type="number" name="thursday_sminute" min="0" max="59" value="0" class="form-control"
                                           placeholder="Open Minute" required="required">
                                </div>								
                                <div class="col-sm-2">
                                    <input id="thursday_ehour" type="number" name="thursday_ehour" min="0" max="23" value="22" class="form-control"
                                           placeholder="Close Hour" required="required">
                                </div>
                                <div class="col-sm-2">
                                    <input id="thursday_eminute" type="number" name="thursday_eminute" min="0" max="59" value="0" class="form-control"
                                           placeholder="Close Minute" required="required">
                                </div>								
                                <div class="col-sm-2">
                                    <input id="thursday_monster" type="number" name="thursday_monster" min="1" max="1000" value="" class="form-control"
                                           placeholder="Monster ID" required="required">
                                </div>
                            </div>							
							
                            <div class="form-group required">
                                {!! Form::label('friday', 'Friday', ['class' => 'col-sm-2 control-label']) !!}
                                <div>
									<input type="checkbox" name="friday_check" value="true"> 					
                                </div>								
                                <div class="col-sm-2">
                                    <input id="friday_shour" type="number" name="friday_shour" min="0" max="23" value="5" class="form-control"
                                           placeholder="Open Hour" required="required">
                                </div>
                                <div class="col-sm-2">
                                    <input id="friday_sminute" type="number" name="friday_sminute" min="0" max="59" value="0" class="form-control"
                                           placeholder="Open Minute" required="required">
                                </div>								
                                <div class="col-sm-2">
                                    <input id="friday_ehour" type="number" name="friday_ehour" min="0" max="23" value="22" class="form-control"
                                           placeholder="Close Hour" required="required">
                                </div>
                                <div class="col-sm-2">
                                    <input id="friday_eminute" type="number" name="friday_eminute" min="0" max="59" value="0" class="form-control"
                                           placeholder="Close Minute" required="required">
                                </div>								
                                <div class="col-sm-2">
                                    <input id="friday_monster" type="number" name="friday_monster" min="1" max="1000" value="" class="form-control"
                                           placeholder="Monster ID" required="required">
                                </div>
                            </div>								

                            <div class="form-group required">
                                {!! Form::label('saturday', 'Saturday', ['class' => 'col-sm-2 control-label']) !!}
                                <div>
									<input type="checkbox" name="saturday_check" value="true"> 					
                                </div>										
                                <div class="col-sm-2">
                                    <input id="saturday_shour" type="number" name="saturday_shour" min="0" max="23" value="5" class="form-control"
                                           placeholder="Open Hour" required="required">
                                </div>
                                <div class="col-sm-2">
                                    <input id="saturday_sminute" type="number" name="saturday_sminute" min="0" max="59" value="0" class="form-control"
                                           placeholder="Open Minute" required="required">
                                </div>								
                                <div class="col-sm-2">
                                    <input id="saturday_ehour" type="number" name="saturday_ehour" min="0" max="23" value="22" class="form-control"
                                           placeholder="Close Hour" required="required">
                                </div>
                                <div class="col-sm-2">
                                    <input id="saturday_eminute" type="number" name="saturday_eminute" min="0" max="59" value="0" class="form-control"
                                           placeholder="Close Minute" required="required">
                                </div>								
                                <div class="col-sm-2">
                                    <input id="saturday_monster" type="number" name="saturday_monster" min="1" max="1000" value="" class="form-control"
                                           placeholder="Monster ID" required="required">
                                </div>
                            </div>

                            <div class="form-group required">
                                {!! Form::label('', 'Events of year', ['class' => 'col-sm-2 control-label']) !!}
                                <br><br>

                                <div class="col-sm-12">
                                    <table class="table">
										<thead>
                                        <tr>
                                            <th style="text-align: center">
												<div class="packageBar">
													<a href="#" class="addEvent">[+] Event</a>
												</div>
                                            </th>												
                                        </tr>
                                        </thead>
                                        <tbody>
											<tr>
												<td class="col-sm-4">
													<div class="packageForm">
														<div class="list-event">
															
														</div>
													</div>	
												</td>											

											</tr>

                                        </tbody>
                                    </table>

                                </div>
                            </div>
                            <!-- /.box-body -->
                            <div class="box-footer">
                                <a href="{{route('missions.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="TemplateEvent">
    <div class="event">
        <div class="head-event">
            <div class="left-event">
                <a href="#" class="removeEvent">[ - ]</a>
            </div>
            <div class="clear"></div>
        </div>
        <div class="body-event">
            <div class="EventInfo">
                <ul>

                        <div>
                            <label>Date</label>&nbsp;
                            <input type="date" value="" name="event_date[]"/>

                            <label style="margin-left:4em">Monster ID</label>&nbsp;	
                            <input type="number" value="" name="event_monster[]" required="required"/>
							
                            <label style="margin-left:4em">Open Time</label>&nbsp;
                            <input type="number" value="5" name="event_open_hour[]" size="3" min="0" max="23" required="required"/>:	
                            <input type="number" value="0" name="event_open_minute[]" size="3" min="0" max="59" required="required"/>	
							
                            <label style="margin-left:4em">Close Time</label>&nbsp;
                            <input type="number" value="22" name="event_close_hour[]" size="3" min="0" max="23" required="required"/>:	
                            <input type="number" value="0" name="event_close_minute[]" size="3" min="0" max="59" required="required"/>						
							
                        </div>					

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



<script type="text/javascript">

    $(document).ready(function(){

        // TODO: Click add item
        $(document).on('click', '.addEvent', function(){
            
            var content = $('#TemplateEvent').html();
            var $list = $('.list-event');
            $list.append(content);
            
            var height = $list[0].scrollHeight;console.log(height);
            $list.scrollTop(height);

            return false;
        });
			
        // TODO: Click remove item
        $(document).on('click', '.removeEvent', function(){
            $(this).parent().parent().parent().remove();
            return false;
        });      

    });
</script>

@endpush