@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>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>  
    <link rel="stylesheet" href="{{asset('css/video_replay.css')}}">
@stop

@section('content')



        <form id="send" action="/attend" method="POST">
            {{ csrf_field() }}
          
        <div class="thumbnail" style="text-align:center">
        <!-- 姓名 開始結束時間input -->
        <div style="margin:0px auto;position:relative">
            <div class="row" style="margin-left: 6%;position:relative" >
                <form action="user" method="GET">
                <div class="col-xs-6 col-md-2">
                <label class="control-label"  style="margin: 2% ; margin-left : 50%">姓　　名
                </div>
                <div class="form-group" >
                <div class="input-group date"   data-target-input="nearest">
                <input style="text-align: center" id="people" name="people"  type="text"  class="form-control peoplepicker-input" required="" data-target="#datetimepicker3">
                        <div class="input-group-append" class="dropdown-toggle" data-toggle="dropdown">
                            <div class="input-group-text" id="btnGetDetails"><i class="fa fa-user fa-lg"></i></div>
                            <ul id="target" class="dropdown-menu">
                            @foreach($content as $contents)
                                <li class="nav-item">
                                <a class="nav-link text-dark">{{$contents['name']}} </a>
                                
                                </li>
                            @endforeach
                            </ul>
                
                        </div>
                    </div>

                    </div>
                </div>
            
           



            <div class="row"  style="margin-left: 6%;position:relative">
                
                <div class="col-xs-6 col-md-2">
                <label class="control-label"  style="margin: 2% ; margin-left : 50%"  >開始時間
                </div>
                <div class="form-group" >
                    <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 class="col-xs-6 col-md-2">
                    <span id="arg" style="margin: 2% ; margin-left : 50%">結束時間:</span>
                </div>
                <div class="form-group" >
                    <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"  style="margin-left: 30%;position:relative">
                <div class="col-md-6">
                <input id='sub_btn'  class="btn-lg btn-success btn" type="submit" value="送出"/>
                </div>
            </div>

            </div>
        </div>
            <input class="form-control" id="myInput" type="text" placeholder="Search..">

            <table  class="table table-dark table-striped " style="text-align:center">

            <tr>
            <td>時間</td>
            <td>姓名</td>
            <td>上班時間</td>
            <td>下班時間 </td>
            <td>外出時間</td>
            <td>返回時間</td>
            </tr>
            
            <tbody id="myTable">
            @foreach($content as $contents)
            <tr >
            <td>{{$contents['time']}}</td>
            <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
            </tbody>
            
            </table>




        </form>

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





<!-- 時間選擇器 -->
<!-- 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>

<script>

$(document).ready(function() 
{
   $('ul.dropdown-menu li').click(function(e) 
   { 
    $("#people").val($.trim($(this).text()));
    //trime => clear white spaces
   });
});

 $(document).ready(function(){
   $("#myInput").on("keyup", function() {
     var value = $(this).val().toLowerCase();
     $("#myTable tr").filter(function() {
       $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
     });
   });
 });
 </script>

@endsection

 
