@extends('layout.default')

@section('title', '攝影機調閱')

@section('header')

{{--    selectize--}}
{{--    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.min.css" />--}}
{{--    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>--}}
{{--    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js"></script>--}}


{{--    引入bootstrap-table css樣式與js--}}
    <link href="/css/bootstrap-table.css" rel="stylesheet">
{{--    <script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>--}}
    <script src="/js/tableExport.min.js"></script>
    <script src="/js/bootstrap-table.js"></script>
    <script src="/js/bootstrap-table-zh-TW.min.js"></script>
    <script src="/js/bootstrap-table-export.min.js"></script>
{{--引入 datetimepicker 相關套件--}}
<script type="text/javascript" src="/bower_components/moment/moment.js"></script>
<script type="text/javascript" src="/bower_components/moment/locale/zh-tw.js"></script>
{{--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script>--}}
<script type="text/javascript" src="/js/tempusdominus-bootstrap-4.min.js"></script>
{{--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" />--}}
<link rel="stylesheet" href="/css/tempusdominus-bootstrap-4.min.css" />
{{--<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">--}}
<link href="/css/font-awesome.min.css" rel="stylesheet">

       {{--css 樣式定義--}}
    <style type="text/css">
        /*人臉訊息文字*/
        p.information {
            margin: 0px auto;
            font-size: 8pt;
            text-align: center;
            color: white;
        }
        /*人臉圖片*/
        img.faceimg{
            border:2px #ccc solid;
            /*width: 30%;*/
            width: 50px;
            align-self:center ;
            margin-left: 2%;
        }

        input.checkbox{
            display: block;
            width: 100%;
            height: 20px;
        }

        /*datetimepicker 字體修正字體修正*/
        .datepicker {
            font-size: 18px;
        }
    /* 複寫 fixed-height 已修改固定data高度*/
        .fixed-height{
            height: 75vh !important;
        }

        .exampleSearch {
            width: 300px;
            height: 500px;
            margin: 0 auto;
            display: block;
            margin-top: 300px;
        }
        .seeline{
            border: #ffffff 1px solid;
        }

       div.dashboard-content{
           background-color: blue !important;
       }

</style>
@endsection


@section('body')
@endsection
@section('content')

    {{--主畫面--}}
    <div>
        <div class="row" style="height: 100vh;margin-left: -0;margin-right: 0px;">
            {{-- 攝影機 選單區--}}
            <div class="collapse p-4 col-md-2 show"  id="navbarToggleExternalContent" style="background: #0271a0">
                <a href="{{ Route("leave_index") }}" style="text-decoration:none;"><h2 class="text-dark" style="font-size: 20pt;text-align: center;background: white">差勤管理</h2></a>
                <div style="height: 5vh"></div>
                {{--空白分隔列--}}
                <div style="overflow: hidden">
                    <nav class="nav flex-column">
                        <a id="title_person" class="nav-link" data-toggle="collapse" href="#collapsePerson" role="button" aria-expanded="false" aria-controls="collapsePerson" href="#" style="color: #ffffff;display: none">人員管理</a>
                        <div class="collapse" id="collapsePerson">
                            <div class="card card-body" style="background: rgba(255,255,255,0);font-size:17px;">
                                <a id="1" class="nav-link" href="{{ Route("person") }}" style="color: #ffffff;display: none">人臉庫管理</a>
                                <a id="4" class="nav-link" href="{{ Route("comparison") }}" style="color: #ffffff;display: none">打卡紀錄</a>
                                <a id="5" class="nav-link" href="{{ Route("Group_index") }}" style="color: #ffffff;display: none">人員群組管理</a>
                                <a id="6" class="nav-link" href="{{ Route("insert_user") }}" style="color: #ffffff;display: none">使用者管理</a>
                            </div>
                        </div>
                        <a id="title_attendance" class="nav-link" data-toggle="collapse" href="#collapseLeave" role="button" aria-expanded="false" aria-controls="collapseLeave" href="#" style="color: #ffffff;display: none">差勤管理</a>
                        <div class="collapse show" id="collapseLeave">
                            <div class="card card-body" style="background: rgba(255,255,255,0);font-size:17px;">
                                <a id="7" class="nav-link" href="{{ Route("leave_index") }}" style="color: #ffffff;display: none">員工請假</a>
                                <a id="8" class="nav-link" href="{{ Route("businesstrip_index") }}" style="color: #ffffff;display: none">員工出差</a>
                                <a id="17" class="nav-link" href="{{ Route("overtime_index") }}" style="color: #ffffff;display: none">加班申請</a>
                                <a id="9" class="nav-link" href="{{ Route("checkleave_index") }}" style="color: #ffffff;display: none">請假審核</a>
                                <a id="23" class="nav-link" href="{{ Route("check_overtime") }}" style="color: #ffffff;display: none">加班審核</a>
                                <a id="22" class="nav-link" href="{{ Route("statistics_index") }}" style="color: #ffffff;display: none">請假統計</a>
                                <a id="10" class="nav-link" href="{{ Route("attendance") }}" style="color: #ffffff;display: none">出勤管理</a>
                                <a id="11" class="nav-link" href="{{ Route("graph_attendance") }}" style="color: #ffffff;background: rgba(255,255,255,0.2);display: none">測溫管理</a>
                            </div>
                        </div>
                        <a id="title_device"class="nav-link" data-toggle="collapse" href="#collapseDevice" role="button" aria-expanded="false" aria-controls="collapseDevice" href="#" style="color: #ffffff;display: none">設備管理</a>
                        <div class="collapse " id="collapseDevice">
                            <div class="card card-body" style="background: rgba(255,255,255,0);font-size:17px;">
                                <a id="12" class="nav-link" href="{{ Route("device") }}" style="color: #ffffff;display: none">設備管理</a>
                                <a id="13" class="nav-link" href="{{ Route("type") }}" style="color: #ffffff;display: none">類型管理</a>
                                <a id="14" class="nav-link" href="{{ Route("group") }}" style="color: #ffffff;display: none">群組管理</a>
                                <a id="15" class="nav-link" href="{{ Route("relation") }}" style="color: #ffffff;display: none">設備群組關係</a>
                            </div>
                        </div>
                    </nav>
                    @foreach($authority as $auth)
                        <script>
                            var a_this=document.getElementById({{$auth["features_id"]}});
                            // device.style.visibility="visible";
                            a_this.style.display="";

                            if({{$auth["features_id"]}}=='1' || {{$auth["features_id"]}}=='4' || {{$auth["features_id"]}}=='5' || {{$auth["features_id"]}}=='6' )
                            {
                                var person=document.getElementById("title_person");
                                person.style.display="";
                            }
                            if({{$auth["features_id"]}}=='7' || {{$auth["features_id"]}}=='8' || {{$auth["features_id"]}}=='17' || {{$auth["features_id"]}}=='9' || {{$auth["features_id"]}}=='10' || {{$auth["features_id"]}}=='11'|| {{$auth["features_id"]}}=='22'|| {{$auth["features_id"]}}=='23' )
                            {
                                var attendance=document.getElementById("title_attendance");
                                attendance.style.display="";
                            }
                            if({{$auth["features_id"]}}=='12' || {{$auth["features_id"]}}=='13' || {{$auth["features_id"]}}=='14' || {{$auth["features_id"]}}=='15' )
                            {
                                var device=document.getElementById("title_device");
                                device.style.display="";
                            }
                        </script>
                    @endforeach

                </div>
                <form method="GET" action="{{ Route("user_logout") }}">
                    <div class="col-12" style="text-align: center">
                        <input class="btn btn-outline-light" style="font-size:16px;text-align: center" type="submit" id="logout" name="logout" value="登出" >
                    </div>
                </form>
                <div style="height: 5vh"></div>
                <div class="row">
                    <div class="col-3">
                        <img id="face-img-preview" class="img-fluid" src="{{ asset("/black-gold.png") }}"  style="height:100px; vertical-align:middle;" >
                    </div>
                    <div class="col-9">
                        <font size="4">譽華科技有限公司</font><br>
                        <font size="2">Yu Hwa Technology Co., Ltd.</font><br>
                        <font size="4">電話：07-3382270</font><br>
                        <font size="4">聯絡人：周大慶</font>
                    </div>

                </div>

            </div>
            {{--攝影機 畫面區--}}
            <div id="Screen-aria" class="col-md-10" style="background:#e0e6ec">
                {{--頁面選單--}}
{{--                <div id="menu" class="row" style="background: white">--}}
{{--                    <div class="col-6 text-center"><a href="{{ Route("leave_index") }}" style="text-decoration:none;color: #28a745;">員工請假管理</a></div>--}}
{{--                    <div class="col-6 text-center"><a href="{{ Route("checkleave_index") }}" style="text-decoration:none;color: #1b1e21;">主管審核</a></div>--}}
{{--                </div>--}}

                {{--保留區域--}}
                <div style="height: 1vh;width: 100%"></div>
                <div style="height: 10vh;width: 100%">
                    <img id="face-img-preview" class="img-fluid" src="{{ asset("/doctor-logo.png") }}"  style="height:10vh; vertical-align:middle; display: inline-block;" >
                    <font size="7">社團法人中華民國家庭牙醫學會</font><br>
                </div>
                <div id="Screens" style="height: 85vh;width: 100%">
{{--                    <iframe src="http://192.168.6.240:6080/d-solo/AklC-YWGz/punch-card?orgId=1&from=1592982397729&to=1592983096037&panelId=24" height="500vh" width="500vh" frameborder="0"></iframe>--}}
{{--                    <iframe src="http://192.168.6.72:3000/d-solo/AklC-YWGz/punch-card?orgId=1&from=1592982397729&to=1592983096037&panelId=24" height="500vh" width="500vh" frameborder="0"></iframe>--}}
                    {{--  <iframe src="http://192.168.6.72:3000/d-solo/AklC-YWGz/punch-card?orgId=1&refresh=10s&from=now/d&to=now/d&panelId=24" height="45%" width="40%" frameborder="0"></iframe>--}}
{{--                    <iframe src="http://192.168.6.72:3000/d-solo/AklC-YWGz/punch-card?orgId=1&from=1592982397729&to=1592983096037&panelId=29" height="500vh" width="500vh" frameborder="0"></iframe>--}}
{{--                    <iframe src="http://192.168.50.155:6080/d/zKSsBwRgk/ji-shi-hua-mian?orgId=1&refresh=5s&from=now%2Fd&to=now%2Fd&kiosk&theme=light" height="100%" width="100%" frameborder="0" id="grafana_iframe"  onload="grafana_loaded()">--}}
                            {{--異常紀錄舊的--}}
{{--                    <div class="row">--}}
{{--                        <div class="col-9" align="center">--}}
{{--                            <iframe src="http://192.168.6.72:3000/d-solo/zKSsBwRgkzzzz/ji-shi-hua-mian-doctor-1?orgId=1&refresh=5s&from=now/d&to=now/d&panelId=2" width="70%" height="125%" frameborder="0"></iframe>--}}
{{--                            <div style="height: 5vh;" class="col-9"></div>--}}
{{--                            <iframe src="http://192.168.6.72:3000/d-solo/zKSsBwRgkzzzz/ji-shi-hua-mian-doctor-2?orgId=1&from=now/d&to=now/d&viewPanel=5&refresh=5s&from=now/d&to=now/d&panelId=5" width="95%" height="85%" frameborder="0"></iframe>--}}
{{--                        </div>--}}
{{--                        <div class="col-3">--}}
{{--                            <iframe src="http://192.168.6.72:3000/d-solo/zKSsBwRgkzzzz/ji-shi-hua-mian-doctor-1?orgId=1&refresh=5s&from=now/d&to=now/d&panelId=3" width="100%" height="220%" frameborder="0"></iframe>--}}
{{--                        </div>--}}
{{--                    </div>--}}
                    {{--異常紀錄新的--}}
                    <div class="row">
                        <div class="col-9" align="center">
                            <iframe src="http://192.168.50.155:6080/d-solo/zKSsBwRgkzzzz/ji-shi-hua-mian-doctor-3?orgId=1&refresh=5s&from=now/d&to=now/d&panelId=2" width="70%" height="125%" frameborder="0"></iframe>
                            <div style="height: 5vh;" class="col-9"></div>
                            <iframe src="http://192.168.50.155:6080/d-solo/zKSsBwRgkzzzz/ji-shi-hua-mian-doctor-3?orgId=1&from=now/d&to=now/d&viewPanel=5&refresh=5s&from=now/d&to=now/d&panelId=7" width="95%" height="87%" frameborder="0"></iframe>
                        </div>
                        <div class="col-3">
                            <iframe src="http://192.168.50.155:6080/d-solo/zKSsBwRgkzzzz/ji-shi-hua-mian-doctor-3?orgId=1&refresh=5s&from=now/d&to=now/d&panelId=3" width="100%" height="220%" frameborder="0"></iframe>
                        </div>
                    </div>

{{--                    <div class="row">--}}
{{--                        <div class="col-6" align="center">--}}
{{--                            <iframe src="http://192.168.6.72:3000/d-solo/zKSsBwRgkz/ji-shi-hua-mian-doctor?orgId=1&refresh=5s&from=now/d&to=now/d&panelId=5" width="100%" height="400%" frameborder="0"></iframe>--}}
{{--                        </div>--}}
{{--                        <div class="col-6">--}}
{{--                            <iframe src="http://192.168.6.72:3000/d-solo/zKSsBwRgkz/ji-shi-hua-mian-doctor?orgId=1&refresh=5s&from=now/d&to=now/d&panelId=3" width="100%" height="400%" frameborder="0"></iframe>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                    <iframe src="http://192.168.6.72:3000/d/zKSsBwRgkz/ji-shi-hua-mian-doctor?orgId=1&refresh=5s&from=now%2Fd&to=now%2Fd&kiosk&theme=light" height="100%" width="100%" frameborder="0" id="grafana_iframe"  onload="grafana_loaded()"></iframe>--}}

                    {{--現有人員資訊區--}}
{{--                    <table class="table table-striped table-bordered table-hover fixed-height" id="tableL01"></table>--}}
                </div>
            </div>
        </div>
    </div>

    <script>
        // $('[data-toggle="popover"]').popover({
        //     title: '證明文件',
        //     content: "test"
        // });
        // $('.popover-dismiss').popover({
        //     trigger: 'focus'
        // })
    </script>

    {{--跳出錯誤訊息    --}}
        @if(isset($error_msg))
            <script>
                alert('{{ $error_msg }}');
            </script>
    @endif

    {{--force on the camera by you choose--}}
    @if(isset($camera_info))
        <script>
            document.getElementById("{{ $camera_info['group'].$camera_info['name'] }}"+"_btn").setAttribute("style","background-color:transparent;color: #2fa360;font-weight: bolder;border: none;");
            document.getElementById("{{ $camera_info['group'].$camera_info['name'] }}").setAttribute("style","color: #2fa360;font-weight: bolder;");
            document.getElementById("{{ $camera_info['group'] }}"+"collapse").classList.add("show");
        </script>
    @endif

{{--    boostrap tabel js--}}
    <script>
        // 載入人員資料
        @php
            if(isset($rowdata)){
                echo "var jdata=".json_encode($rowdata).";";
            }else{
                echo "var jadata=[];";
            }
        @endphp

        $('#tableL01').bootstrapTable('destroy');   //動態載入表格之前，先銷毀表格
        var tableColumns = [
            {field: 'state', checkbox: true,},
            {field: 'name',title: '人員名稱', sortable: false},
            {field: 'start', title: '請假開始時間', sortable: true},
            {field: 'end', title: '請假結束時間', sortable: true},
            {field: 'modify', title: '修改', sortable: false},
            {field: 'delete', title: '刪除', sortable: false},
        ];
        $('#tableL01').bootstrapTable({//表格初始化
            locale:"zh-TW",// 地區語系轉換
            columns: tableColumns,  //表頭
            data:jdata, //通過ajax返回的資料
            width:0.3*Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
            height:0.3*Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
            method: 'get',
            // pageSize: 5, //每頁3條
            // pageNumber: 1,  //第1頁
            // pageList: "[5,10,all]",   //在使用過程中根據情況調整每頁條數.雖然你現在定義的每頁3條，但你可以隨時調整為10條或25條。
            cache: false,   //不快取
            striped: true,
            pagination: false,
            sidePagination: 'client',
            search: false,
            showRefresh: false,
            showExport: false,
            showFooter: false,
            exportTypes: ['csv', 'txt', 'xml','excel'],
            clickToSelect: true,
            sortName:'day', // 預設排序
        });
        // 修改人員資料處理
        var test="123";
        test="456";
        function person_modify(obj) {
            let jdata_index=parseInt(obj.closest('tr').getAttribute("data-index"));
            document.getElementById("no").value=jdata[jdata_index].no;
            //document.getElementById("modify_selectPerson").value=jdata[jdata_index].id;
            //document.getElementById("modify_department").value=jdata[jdata_index].depart_leave_unit_department;
            document.getElementById("modify_selectCategory").value=jdata[jdata_index].category;
            document.getElementById("modify_reason").value=jdata[jdata_index].reason;
            document.getElementById("modify_start_time").value=jdata[jdata_index].start;
            document.getElementById("modify_end_time").value=jdata[jdata_index].end;
            document.getElementById("modify_leave_day").value=jdata[jdata_index].leave_day;
            document.getElementById("modify_leave_time").value=jdata[jdata_index].leave_time;
            document.getElementById("modify_annual_discount").value=jdata[jdata_index].annual_leave_discount;
            document.getElementById("leave_no").value=jdata[jdata_index].no;

            $('btn_upload_file').on('show.bs.popover',function () {
                var popover = document.getElementById("btn_upload_file");
                popover.setAttribute("data-content", 'teeqwe');
            })
            // document.getElementById("btn_upload_file").config.content=jdata[jdata_index].upload_file;

            // test =jdata[jdata_index].upload_file;
            // test="789";
        }

        // $('[data-toggle="popover"]').popover({
        //     title: '證明文件',
        //     content: test
        // });
        // $('.popover-dismiss').popover({
        //     trigger: 'focus'
        // })
        // html string to element
        function htmlToElement(html) {
            var template = document.createElement('template');
            html = html.trim(); // Never return a text node of whitespace as the result
            template.innerHTML = html;
            return template.content.firstChild;
        }
    </script>
    <script>
        {{--    取得已選取目標--}}
        function getIdSelections() {
            // let jdata_index=parseInt(obj.closest('tr').getAttribute("data-index"));
            // document.getElementById("leave_no").value=jdata[jdata_index].no;
            return $.map($('#tableL01').bootstrapTable('getSelections'), function (row) {
                return row.no
            })
        }
        {{--    刪除人臉--}}
        function post_delete_leave(obj) {
            // let jdata_index=parseInt(obj.closest('tr').getAttribute("data-index"));
            // document.getElementById("leave_no").value=jdata[jdata_index].no;
            // let idselections=document.getElementById("leave_no").value;
            let idselections=getIdSelections();
            if(confirm("是否刪除"+idselections)){
                var form = document.createElement("form");
                form.setAttribute("method","post");
                form.setAttribute("action","{{ Route("delete_employeeleave") }}");
                var idselectionsField = document.createElement("input");
                idselectionsField.setAttribute("type", "hidden");
                idselectionsField.setAttribute("name", "selectedId");
                idselectionsField.setAttribute("value",idselections);
                form.appendChild(idselectionsField);
                var csrfField=document.createElement("input");
                csrfField.setAttribute("type", "hidden");
                csrfField.setAttribute("name", "_token");
                csrfField.setAttribute("value", "{{ csrf_token() }}");
                form.appendChild(csrfField);
                document.body.appendChild(form);    // Not entirely sure if this is necessary
                form.submit();
            }
        }
        {{--    人臉圖片預覽--}}
        var inputface=document.getElementById("face-img-input");
        var previewface=document.getElementById("face-img-preview");
        inputface.addEventListener('change',function () {
            var file =this.files[0];
            var reader=new FileReader();
            // 可接受的附檔名
            var validExts = new Array(".jpg");
            var fileExt = file.name.substring(file.name.lastIndexOf('.'));
            reader.addEventListener('load',function () {
                if (validExts.indexOf(fileExt) < 0) {
                    alert("檔案類型錯誤，可接受的副檔名有：" + validExts.toString());
                    return false;
                }else{
                    previewface.src=reader.result;
                }
            },false);
            reader.readAsDataURL(file);
        },false);
        var modifyface=document.getElementById("modify-face-img-input");
        var modifypreviewface=document.getElementById("modify-face-img-preview");
        modifyface.addEventListener('change',function () {
            var file =this.files[0];
            var reader=new FileReader();
            // 可接受的附檔名
            var validExts = new Array(".jpg");
            var fileExt = file.name.substring(file.name.lastIndexOf('.'));
            reader.addEventListener('load',function () {
                if (validExts.indexOf(fileExt) < 0) {
                    alert("檔案類型錯誤，可接受的副檔名有：" + validExts.toString());
                    return false;
                }else{
                    modifypreviewface.src=reader.result;
                }
            },false);
            reader.readAsDataURL(file);
        },false);
        // 下拉選單預設值回調
        $('#inputGroupSelect04').val("{{ old("search_type","default") }}");
        // 有效期間選擇響應
        function selectExpiryDateonchange(x) {
            let elemet_selted=document.getElementById(x).value;
            // console.log(elemet_selted);
            switch (elemet_selted) {
                case '1':
                    $("#start_time").removeAttr("required");
                    $("#end_time").removeAttr("required");
                    $("#modify-start-time").removeAttr("required");
                    $("#modify-end-time").removeAttr("required");
                    break;
                case '2':
                    $("#start_time").attr("required","true");
                    $("#end_time").attr("required","true");
                    $("#modify-start-time").attr("required","true");
                    $("#modify-end-time").attr("required","true");
                    break;
                default:
                    break;
            }
        }
    </script>
@endsection
