@extends('layouts.template')
@section('header')
    <script type="text/javascript" src="{{asset('bower_components/moment/moment.js')}}"></script>
    <script type="text/javascript" src="{{asset('bower_components/moment/locale/zh-tw.js')}}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.0.0-RC.5/video.js"></script>
    <!-- PC 端浏览器不支持播放 hls 文件(m3u8), 需要 videojs-contrib-hls 来给我们解码 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.3.3/videojs-contrib-hls.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-hotkeys/0.2.25/videojs.hotkeys.min.js"></script>
    <link rel="stylesheet" href="{{asset('css/video_replay.css')}}">
@stop

@section('content')



        <form id="send" action="/attend" method="GET">
            {{ csrf_field() }}
            <div class="row" >
                
                <div class="col-xs-6 col-md-2">
                    <span id="arg">開始時間:</span>
                </div>
                <div class="form-group" style="margin-left: 2%" >
                    <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
                        <input id='start_time' style="text-align: center" name="start_time" type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1" required/>
                        <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
                            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row"><div class="col-md-6" style="margin-left: 2%">到</div></div>
            <div class="row">
               
                <div class="col-xs-6 col-md-2">
                    <span id="arg">結束時間:</span>
                </div>
                <div class="form-group" style="margin-left: 2%">
                    <div class="input-group date" id="datetimepicker2" data-target-input="nearest">
                        <input id='end_time' style="text-align: center" name="end_time" type="text" class="form-control datetimepicker-input" data-target="#datetimepicker2" required/>
                        <div class="input-group-append" data-target="#datetimepicker2" data-toggle="datetimepicker">
                            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6"></div><input id='sub_btn' style="margin: 2% ; margin-left : 80%"  class="btn-lg btn-success btn" type="submit" value="送出"/>
            </div>
            <table class="table table-dark table-striped" style="text-align:center">

            <tr>
            <td>姓名</td>
            <td>上班時間</td>
            <td>下班時間 </td>
            <td>外出時間</td>
            <td>返回時間</td>
            </tr>
            
            
            @foreach($content as $contents)<tr>
            <td>{{$contents['name']}}</td>
            <td>{{$contents['on_work']}}</td>
            <td>{{$contents['off_work']}}</td>
            <td>{{$contents['go_out']}}</td>
            <td>{{$contents['come_back']}}</td>

</tr>
            @endforeach

            
            </table>




        </form>


    </div>
</div>
<span id='buttom'></span>




<!-- 時間選擇器 -->
<!-- datetimepicker1 物件  -->
<script type="text/javascript">
    $(function () {
        $('#datetimepicker1').datetimepicker({
            locale:'zh-tw',
            format: 'YYYY/MM/DD HH:mm:ss ',
            weekStart: 1,
            autoclose: 0,
            todayHighlight: 1,
            // sideBySide:true,
            stepping:0,
            minView:0,
            maxView:0,
            startView: 0,  // 0 ＝月曆   1＝月份  2 =年份
        });
    });
</script>

<!-- datetimepicker2 物件  -->
<script type="text/javascript">
    $(function () {
        $('#datetimepicker2').datetimepicker({
            locale:'zh-tw',
            format: 'YYYY/MM/DD HH:mm:ss ',
            weekStart: 1,
            autoclose: 0,
            todayHighlight: 1,
            // sideBySide:true,
            stepping:0,
            minView:0,
            maxView:0,

            startView: 0,  // 0 ＝月曆   1＝月份  2 =年份
        });
    });
</script>


@endsection
