@inject('sentinel', 'Cartalyst\Sentinel\Native\Facades\Sentinel')
@extends('layout.manage')

@section('css_page_level')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css') }}"/>
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-daterangepicker/daterangepicker.min.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-select/bootstrap-select.min.css') }}"/>
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/select2/css/select2.css') }}"/>
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/select2/css/select2-bootstrap.min.css') }}"/>
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/jquery-multi-select/css/multi-select.css') }}"/>
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css') }}"/>
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-timepicker/css/bootstrap-timepicker.min.css') }}"/>
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/global/plugins/bootstrap-select/1.12.2/bootstrap-select.min.css') }}"/>
@endsection

@section('page-content-wrapper')
    <style type="text/css">
        .th_display_none { display: none;}
        .disableInput {
            background-color: #ffee88 !important;
        }
        .readOnlyInput {
            background-color: #ffee88 !important;
        }
        .mr {
            margin-right: 10px; 
        }
    </style>
    <div class="page-content-wrapper" id="main">
        <div class="page-content">                               
            <!-- BEGIN PAGE HEADER-->
            <h3 class="page-title">
            @inject('setting','anlutro\LaravelSettings\Facade')
            {{ $setting::get('system_name','全方位建築智慧化管理系統') }} <small>{{ $setting::get('company_name','新保科技') }}</small>
            </h3>
            <div class="page-bar">
                <ul class="page-breadcrumb">
                    <li>
                        <i class="fa fa-home"></i>
                        <a href="index.html">首頁</a>
                        <i class="fa fa-angle-right"></i>
                    </li>
                    <li>
                        <a href="#">差勤管理</a>
                        <i class="fa fa-angle-right"></i>
                    </li>
                    <li>
                        <a href="#">出勤查詢</a>
                    </li>
                </ul>
                <div class="page-toolbar">

                </div>
            </div>

            <!-- END PAGE HEADER-->
            <!-- BEGIN DASHBOARD STATS -->
            <div class="row">
                <div class="col-md-12">
                    <!-- BEGIN EXAMPLE TABLE PORTLET-->
                    <div class="portlet light bordered">
                        <div class="btn-group pull-right">
                            <button id="btn_print_error" class="btn btn-danger mr">列印異常狀況報表</button>
                            <button id="btn_print_shift" class="btn btn-info mr">列印班表</button>
                            <button id="btn_print_department" class="btn btn-success mr">列印部門月出勤表</button>
                            <button id="btn_print_person" class="btn btn-warning mr">列印個人出勤表</button>
                            <a class="btn purple dropdown-toggle pull-right" data-toggle="dropdown" href="javascript:;"> 條件查詢
                                <i class="fa fa-angle-down"></i>
                            </a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="javascript:;" id="btn_query"> 排班查詢 </a>
                                </li>
                                <li>
                                    <a href="javascript:;" id="btn_query2"> 本日簽到狀況 </a>
                                </li>
                                <li>
                                    <a href="javascript:;" id="btn_query3"> 最近七日簽到狀況 </a>
                                </li>
                            </ul>
                        </div>
                        <div class="portlet-body">
                            <table class="table table-striped table-bordered table-hover" id="table_list">

                            </table>
                        </div>
                    </div>
                    <!-- END EXAMPLE TABLE PORTLET-->
                </div>
            </div>
        </div>
        <div class="modal fade draggable-modal" id="modal_query" tabindex="-1" role="basic" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                        <h4 class="modal-title">查詢條件</h4>
                    </div>
                    <form id="form_query" action="" class="form-horizontal">
                        <div class="modal-body">
                            <div class="form-body">
                                <div class="form-group">
                                    <label class="col-md-3 control-label">指定員工</label>
                                    <div class="col-md-9">
                                        <select class="form-control select2" name="user_id">
                                            @foreach($staffs as $staff)
                                                <option value="{{$staff->id}}">{{$staff->employee_no}}-{{$staff->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">排班日期</label>
                                    <div class="col-md-9">
                                        <div class="input-group input-large date-picker input-daterange">
                                            <input type="text" class="form-control datepicker" name="from" id="query_from" data-date-format="yyyy-mm-dd" value="{{date('Y-m-01')}}">
                                            <span class="input-group-addon"> 到 </span>
                                            <input type="text" class="form-control datepicker" name="to"  id="query_to" data-date-format="yyyy-mm-dd" value="{{date('Y-m-t')}}">
                                        </div>  
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn dark btn-outline" data-dismiss="modal">關閉</button>
                            <button id="query_submit" type="submit" class="btn green btn_query_submit" value="query">確定</button>
                        </div>
                    </form>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>

        <div class="modal fade draggable-modal" id="modal_print_error" tabindex="-1" role="basic" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header" style="background-color: #E26A6A;">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                        <h4 class="modal-title" style="color: #fff;">異常狀況報表時間選擇</h4>
                    </div>
                    <form id="form_print_error" action="" class="form-horizontal">
                        <div class="modal-body">
                            <div class="form-body">
                                <div class="form-group">
                                    <label class="col-md-3 control-label">報表類型</label>
                                    <div class="col-md-7">
                                        <label>
                                            <input type="radio" name="print_type" value="only" onclick="radioonly()" checked> 個人
                                        </label>
                                        <label>
                                            <input type="radio" name="print_type" value="many" onclick="radiomany()"> 全部
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group" id="select_error_user_id">
                                    <label class="col-md-3 control-label">指定員工</label>
                                    <div class="col-md-7">
                                        <select class="form-control select2" name="error_user_id">
                                            @foreach($staffs as $staff)
                                                <option value="{{$staff->id}}">{{$staff->employee_no}}-{{$staff->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">指定月份</label>
                                    <div class="col-md-7">
                                        <input name="print_error_month" type="month" class="form-control" value='{{date("Y-m")}}'>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">指定異常類別</label>
                                    <div class="col-md-7">
                                        <label>
                                            <input type="radio" name="error_type" value="all" checked> 全部
                                        </label>
                                        <label>
                                            <input type="radio" name="error_type" value="0"> 曠職
                                        </label>
                                        <label>
                                            <input type="radio" name="error_type" value="200"> 遲到
                                        </label>
                                        <label>
                                            <input type="radio" name="error_type" value="201"> 早退
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn default" data-dismiss="modal">關閉</button>
                            <a id="btn_print_submit_error" class="btn green" target="_blank">列印</a>
                        </div>
                    </form>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>

        <div class="modal fade draggable-modal" id="modal_print_shift" tabindex="-1" role="basic" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                        <h4 class="modal-title">班表時間選擇</h4>
                    </div>
                    <form id="form_print_shift" action="" class="form-horizontal">
                        <div class="modal-body">
                            <div class="form-body">
                                <div class="form-group">
                                    <label class="col-md-3 control-label">指定月份</label>
                                    <div class="col-md-9">
                                        <input id="print_month" name="print_month" type="month" class="form-control" value='{{date("Y-m")}}'>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn default" data-dismiss="modal">關閉</button>
                            <a id="btn_print_submit" class="btn green" target="_blank">列印</a>
                        </div>
                    </form>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>

        <div class="modal fade draggable-modal" id="modal_print_person" tabindex="-1" role="basic" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                        <h4 class="modal-title">班表時間選擇</h4>
                    </div>
                    <form id="form_print_person" action="" class="form-horizontal">
                        <div class="modal-body">
                            <div class="form-body">
                                <div class="form-group">
                                    <label class="col-md-3 control-label">指定員工</label>
                                    <div class="col-md-9">
                                        <select class="form-control select2" id="user_id" name="user_id">
                                            @foreach($staffs as $staff)
                                                <option value="{{$staff->id}}">{{$staff->employee_no}} - {{$staff->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">指定月份</label>
                                    <div class="col-md-9">
                                        <input id="print_month_person" name="print_month_person" type="month" class="form-control" value='{{date("Y-m")}}'>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn default" data-dismiss="modal">關閉</button>
                            <a id="btn_print_person_submit" class="btn green" target="_blank">列印</a>
                        </div>
                    </form>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        
        <div class="modal fade draggable-modal" id="modal_print_department" tabindex="-1" role="basic" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                        <h4 class="modal-title">列印部門月出勤表</h4>
                    </div>
                    <form id="form_print_department" action="" class="form-horizontal">
                        <div class="modal-body">
                            <div class="form-body">
                                <div class="form-group">
                                    <label class="col-md-3 control-label">選擇部門</label>
                                    <div class="col-md-9">
                                        <select class="form-control selectpicker" data-live-search="true" data-actions-box="true" id="department" name="department">
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label">指定月份</label>
                                    <div class="col-md-9">
                                        <input name="print_month_department" type="month" class="form-control" value='{{date("Y-m")}}'>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn default" data-dismiss="modal">關閉</button>
                            <a id="btn_print_department_submit" class="btn green" target="_blank">列印</a>
                            <a id="btn_print_department_submit2" class="btn blue">下載EXCEL</a>
                        </div>
                    </form>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>

        <div id="modal_query2" class="modal fade bs-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-lg" id="modal_query2_content">
            </div>
        </div>


    </div>
@endsection

@section('plugins_page_level')
    <script type="text/javascript" src="{{ asset('assets/global/plugins/jquery-validation/js/jquery.validate.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/global/plugins/jquery-validation/js/additional-methods.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/global/plugins/datatables/media/js/jquery.dataTables.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/global/plugins/moment.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-daterangepicker/daterangepicker.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/global/plugins/bootbox/bootbox.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/global/plugins/jquery-multi-select/js/jquery.multi-select.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/global/plugins/select2/js/select2.full.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-timepicker/js/bootstrap-timepicker.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/global/plugins/bootstrap-select/1.12.2/bootstrap-select.min.js') }}"></script>
@endsection

@section('js_page_level')
 <script>
        $(document).ready(function(){
            callDataTable();
            $.fn.modal.Constructor.prototype.enforceFocus = function () {};
            $(".select2").select2();
            $('.disableInput').prop('disabled', true);
            $('.readOnlyInput').prop('readonly', true);
            $(".datepicker").datepicker({
                format: 'yyyy-mm-dd',
                autoclose: true
            });
            $('.timepicker').timepicker({
                autoclose: true,
                minuteStep: 5,
                showSeconds: false,
                showMeridian: false
            });

            $('#modal_query2').on('hidden.bs.modal',function(){
                $('#modal_query2_content').html('');
            });

            $('#btn_query').click(function(){
                $('#modal_query').modal('show');
            });

            $('#btn_query2').click(function(){
                $.ajax({
                    type: 'post',
                    url : '{{action('Manage\Ehr\EhrScheduleController@schedule_log')}}',
                    data: {
                        type:'day',
                        _token : '{{csrf_token()}}',
                    },
                    success : function(sendback){
                        $('#modal_query2_content').html(sendback);
                        $('#modal_query2').modal('show');
                        callDataTable2();
                    },
                    error : function(sendback){
                        toastr['error']('資料錯誤，請重新整理後再操作');
                    },
                });
            });

            $('#btn_query3').click(function(){
                $.ajax({
                    type: 'post',
                    url : '{{action('Manage\Ehr\EhrScheduleController@schedule_log')}}',
                    data: {
                        type   : 'week',
                        _token : '{{csrf_token()}}',
                    },
                    success : function(sendback){
                        $('#modal_query2_content').html(sendback);
                        $('#modal_query2').modal('show');
                        callDataTable2();
                    },
                    error : function(sendback){
                        toastr['error']('資料錯誤，請重新整理後再操作');
                    },
                });
            });

            $('#btn_print_error').click(function(){
                $('#modal_print_error').modal('show');
            });

            $('#btn_print_shift').click(function(){
                $('#modal_print_shift').modal('show');
            });

            $('#btn_print_person').click(function(){
                $('#modal_print_person').modal('show');
            });

            $('#btn_print_department').click(function(){
                $.ajax({
                    type: 'post',
                    url : '{{action('Manage\Ehr\EhrScheduleController@getDepartment')}}',
                    data: {
                        uid    : '{{ $sentinel::check()->id }}',
                        _token : '{{csrf_token()}}',
                    },
                    success : function(sendback){
                        $('#department').empty();
                        for(var i = 0;i < sendback.department.length;i++){
                            $('#department').append('<option value="' + sendback.department[i].id + '">' + sendback.department[i].name + '</option>');                        }
                        $('#department').selectpicker( { noneSelectedText:'權限不足，無法選擇'} );
                        $('#department').selectpicker('refresh');
                        $('#modal_print_department').modal('show');
                    },
                    error : function(sendback){
                        toastr['error']('資料錯誤，請重新整理後再操作');
                    },
                });
            });

            $('#btn_print_submit_error').click(function(){
                var form = $('#form_print_error');
                form.attr("action", '{{ action('Manage\Ehr\EhrScheduleController@schedule_print_error')}}');
                form.submit();
            });

            $('#btn_print_submit').click(function(){
                var form = $('#form_print_shift');
                form.attr("action", '{{ action('Manage\Ehr\EhrScheduleController@schedule_print')}}');
                form.submit();
            });

            $('#btn_print_person_submit').click(function(){
                var form = $('#form_print_person');
                form.attr("action",'{{ action('Manage\Ehr\EhrScheduleController@schedule_print_person')}}');
                form.submit();
            });

            $('#btn_print_department_submit').click(function(){
                if($('#department').val() != null){
                    var form = $('#form_print_department');
                    form.attr("action",'{{ action('Manage\Ehr\EhrScheduleController@schedule_print_department')}}');
                    form.submit();
                }else{
                    toastr['warning']('權限不足，無法列印');
                }
            });

            $('#btn_print_department_submit2').click(function(){
                if($('#department').val() != null){
                    var form = $('#form_print_department');
                    form.attr("action",'{{ action('Manage\Ehr\EhrScheduleController@schedule_excel_department')}}');
                    form.submit();
                }else{
                    toastr['warning']('權限不足，無法列印');
                }
            });
        });
     
        var callDataTable = function () {
            var table = $('#table_list');

            var oTable = table.dataTable({
                // Internationalisation. For more info refer to http://datatables.net/manual/i18n
                "language": {
                    "aria": {
                        "sortAscending": ": activate to sort column ascending",
                        "sortDescending": ": activate to sort column descending"
                    },
                    "emptyTable": "此列表目前沒有資料",
                    "info": "顯示第 _START_ 到第 _END_ 則 共有 _TOTAL_ 則",
                    "infoEmpty": "沒有找到符合的資料",
                    "infoFiltered": "(從 _MAX_ 筆資料中過濾)",
                    "lengthMenu": "顯示 _MENU_ 則",
                    "search": "快速篩選:",
                    "zeroRecords": "目前沒有任何資料",
                    "paginate": {
                        "previous":"上一頁",
                        "next": "下一頁",
                        "last": "最後",
                        "first": "最前"
                    }
                },
                "lengthMenu": [
                    [10, 20, 50, -1],
                    [10, 20, 50, "All"] // change per page values here
                ],
                // set the initial value
                "pageLength": 10,
                "aoColumns":[
                    {"sTitle":"出勤日"},
                    {"sTitle":"員工編號"},
                    {"sTitle":"員工姓名"},
                    {"sTitle":"員工職稱"},
                    {"sTitle":"上班時間"},
                    {"sTitle":"下班時間"},
                    {"sTitle":"出勤狀況"},
                    {"sTitle":"工作小時"},
                ],
                "aaData":[{!!$dataArray!!}]
            });
        }
        
        function getFormattedDate(date) {
            var year = date.getFullYear();
            var month = (1 + date.getMonth()).toString();
            month = month.length > 1 ? month : '0' + month;
            var day = date.getDate().toString();
            day = day.length > 1 ? day : '0' + day;
            return year + '-' + month + '-' + day;
        }


        var callDataTable2 = function(){
            $('#table').dataTable({
                // Internationalisation. For more info refer to http://datatables.net/manual/i18n
                "language": {
                    "aria": {
                        "sortAscending": ": activate to sort column ascending",
                        "sortDescending": ": activate to sort column descending"
                    },
                    "emptyTable": "@lang('messages.datatable_no_data')",
                    "info": "@lang('messages.display_from') _START_ @lang('messages.display_to') _END_ @lang('messages.then_total') _TOTAL_ @lang('messages.records')",
                    "infoEmpty": "@lang('messages.no_match')",
                    "infoFiltered": "(@lang('messages.from') _MAX_ @lang('messages.records_filter'))",
                    "lengthMenu": "@lang('messages.display') _MENU_ @lang('messages.records')",
                    "search": "@lang('messages.quick_filter'):",
                    "zeroRecords": "@lang('messages.no_data')",
                    "paginate": {
                        "previous":"@lang('messages.last_page')",
                        "next": "@lang('messages.next_page')",
                        "last": "@lang('messages.lastest')",
                        "first": "@lang('messages.most_previous')"
                    }
                },
                "lengthMenu": [
                    [10, 20, 50, -1],
                    [10, 20, 50, "All"] // change per page values here
                ],
                // set the initial valuekt 
                "aaSorting": [[0,'desc']],
                "pageLength": 10,
                "pagingType": "bootstrap_full_number",
                "columnDefs": [{  // set default column settings
                    'orderable': false,
                }, {
                    "searchable": false,
                    "targets": [0]
                }]
            });
        }

        function radiomany(){
            $('#select_error_user_id').hide();
        }
        function radioonly(){
            $('#select_error_user_id').show();
        }

    </script>
@endsection