@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') }}"/>
@endsection

@section('page-content-wrapper')
	<style type="text/css">
		.th_display_none { display: none;}
        .disableInput {
            background-color: #ffee88 !important;
        }
        .readOnlyInput {
            background-color: #ffee88 !important;
        }
	</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="portlet-body">
							<div class="table-toolbar" >
								<div class="row">
									<div class="col-md-6">
									</div>
                                    <div class="col-md-6" style="text-align: right;">
                                        <a href="{{route('manage::ehr::export_schedule')}}"  class="btn blue">
                                            匯出排班Excel檔 <i class="fa fa-file-excel-o"></i>
                                        </a>
                                    </div>
								</div>
									
							</div>
							<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">
                        <input type="hidden" id="schedule_type" name="type" value="" />
                        <input type="hidden" id="user_id" name="user_id" value="" />
                        <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">
                                        <label class="control-label employee-name"></label>
                                    </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 class="form-group" id="shift_selector">
                                    <label class="col-md-3 control-label">班別選擇</label>
                                    <div class="col-md-9">
                                        <select class="form-control select2" id="query_shift">
                                            @foreach($shifts as $shift)
                                                <option value="{{$shift->shift_code}}" stime="{{$shift->start_time}}" etime="{{$shift->end_time}}" lminutes="{{$shift->late_minutes}}" rstime="{{$shift->rest_start_time}}" retime="{{$shift->rest_end_time}}">{{$shift->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div id="holiday_inc" class="form-group">
                                    <div class="col-md-offset-3 col-md-9">
                                        <label class="control-label"><input type="checkbox" id="sat_inc" name="sat_inc" value="1">週六排班</label>
                                        <label class="control-label"><input type="checkbox" id="sun_inc" name="sun_inc" value="1">週日排班</label>
                                    </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_list" tabindex="-1" role="basic" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <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>
                    <div class="form-horizontal">
                        <div class="modal-body">
                            <div class="form-body">
                                <div class="form-group">
                                    <div class="col-md-12">
                                        <table class="table table-striped table-bordered table-hover" name="table_item_list">
                                            <thead>
                                                <tr>
                                                    <th colspan="6" style="text-align: center;"><label class="employee-name"></label>排班表</th>
                                                </tr>
                                                <tr>
                                                    <th style="width: 150px;">班別名稱</th>
                                                    <th>應上班日期</th>
                                                    <th>狀態</th>
                                                    <th>應上班時間</th>
                                                    <th>應下班時間</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn dark btn-outline" data-dismiss="modal">關閉</button>
                        </div>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        <div class="modal fade draggable-modal" id="modal_edit" tabindex="-1" role="basic" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <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_edit" action="" class="form-horizontal">
                        <input type="hidden" name="userid" value="" />
                        <input type="hidden" name="schedule_start" value="" />
                        <input type="hidden" name="schedule_end" value="" />
                        <div class="modal-body">
                            <div class="form-body">
                                <div class="form-group">
                                    <div class="col-md-12">
                                        <table class="table table-striped table-bordered table-hover" name="table_item_list">
                                            <thead>
                                                <tr>
                                                    <th colspan="6"><label class="employee-name"></label>排班表</th>
                                                </tr>
                                                <tr>
                                                    <th style="width: 150px;">班別名稱</th>
                                                    <th>應上班日期</th>
                                                    <th>應上班時間</th>
                                                    <th>應下班時間</th>
                                                    <th style="width: 100px;">&nbsp;</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn dark btn-outline" data-dismiss="modal">關閉</button>
                            <button type="submit" class="btn green btn_query_submit" value="add">確定排班</button>
                        </div>
                    </form>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
    </div>

    <table id="itemTemplate" style="display:none;">
        <tr>
            <td style="width: 150px;">
                <input type="hidden" class="item-shift" value="" name="shift[]" />
                <label class="control-label shift"></label>
            </td>
            <td>
                <div class="input-group">
                    <input type="hidden" value="" class="item-timepicker form-control item-ehr-date" name="ehr_date[]" />
                    <label class="control-label ehr-date"></label>
                </div>
            </td>
            <td class="td-status-name">
                <div class="input-group">
                    <label class="control-label status-name"></label>
                </div>
            </td>
            <td>
                <div class="input-group">
                    <input type="hidden" value="" class="item-timepicker form-control item-start-time"  name="start_time[]" />
                    <label class="control-label start-time"></label>
                </div>
            </td>
            <td>
                <div class="input-group">
                    <input type="hidden" value="" class="item-timepicker form-control item-end-time" name="end_time[]" />
                    <input type="hidden" value="" class="item-timepicker form-control item-late-minutes" name="late_minutes[]" />
                    <input type="hidden" value="" class="item-timepicker form-control item-rest-start-time" name="rest_start_time[]" />
                    <input type="hidden" value="" class="item-timepicker form-control item-rest-end-time" name="rest_end_time[]" />
                    <label class="control-label end-time"></label>
                </div>
            </td>
            <td style="text-align: center;">
                <button type="button" class="btn red btn_delete_item">刪除</button>
            </td>
        </tr>
    </table>
@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>
@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
            });
            $('#table_list tbody').on('click', '.btn_query', function(){
                var uid = $(this).attr('uid');
                var uname = $(this).attr('uname');
                $('#holiday_inc').hide();
                $('#shift_selector').hide();
                $('.employee-name').html(uname);
                $('#user_id').val(uid);
                $('#schedule_type').val('query');
                $('#modal_query').modal('show');
            });
            $('#table_list tbody').on('click', '.btn_edit', function(){
                var uid = $(this).attr('uid');
                var uname = $(this).attr('uname');
                $('#holiday_inc').show();
                $('#shift_selector').show();
                $('.employee-name').html(uname);
                $('#user_id').val(uid);
                $('#schedule_type').val('schedule');
                $('#modal_query').modal('show');
            });
            
            $('#form_query').submit(function() {
                var type  = $('#schedule_type').val();
                var from  = $('#query_from').val();
                var to    = $('#query_to').val();

                var d1 = new Date($('#query_from').val());
                var d2 = new Date($('#query_to').val());
                var d3 = (d2-d1)/86400000;
                if(d3 >= 93){
                    toastr['warning']('排班請勿超過3個月');
                }else{


                

                    var data  = {};

                    $('[name="table_item_list"] tbody').empty();
                    
                    switch (type) {
                        case 'query':                    
                            $.ajax({
                                type: 'GET',
                                dataType: 'json',
                                url: "{{ route('manage::ehr::query_schedule') }}",
                                data: $("#form_query").serialize(),
                                success: function(sendback){
                                    for (var key in sendback) {
                                        data.shift       = sendback[key].shift_code;
                                        data.shiftText   = sendback[key].shift_name;
                                        data.ehr_date    = sendback[key].ehr_date;
                                        data.start_time  = sendback[key].start_time;
                                        data.end_time    = sendback[key].end_time;
                                        data.status_name = sendback[key].status_name;

                                        $('#modal_list [name="table_item_list"] tbody').append(newItem(data, true)); 
                                    }
                                    
                                    $('#modal_query').modal('hide');
                                    $('#modal_list').modal('show');
                                },
                                error   : function ( data )
                                {
                                    toastr['warning']('無排班紀錄');
                                }
                            });
                            break;
                        case 'schedule':
                            var start_time      = $("#query_shift").select2().find(":selected").attr("stime");
                            var end_time        = $("#query_shift").select2().find(":selected").attr("etime");
                            var late_minutes    = $("#query_shift").select2().find(":selected").attr("lminutes");
                            var rest_start_time = $("#query_shift").select2().find(":selected").attr("rstime");
                            var rest_end_time   = $("#query_shift").select2().find(":selected").attr("retime");
                            var shift           = $("#query_shift").select2().find(":selected").val();
                            var shiftText       = $("#query_shift").select2().find(":selected").text();
                            var sat_inc         = $('#sat_inc').is(":checked");
                            var sun_inc         = $('#sun_inc').is(":checked");
                            
                            $('#form_edit [name="userid"]').val($('#user_id').val());
                            $('#form_edit [name="schedule_start"]').val(from);
                            $('#form_edit [name="schedule_end"]').val(to);
                            
                            from = new Date(from);
                            to   = new Date(to);
        
                            for (var i = from.getTime(); i <= to.getTime(); i = i + (60000 * 60 * 24)){
                                var tmp   = new Date(i);
                                var today = new Date();
                                
                                if (tmp <= today) {
                                    continue;    
                                }
                                if (!sat_inc && tmp.getDay() == 6) continue;
                                if (!sun_inc && tmp.getDay() == 0) continue;
                                
                                data.shift           = shift;
                                data.shiftText       = shiftText;
                                data.ehr_date        = getFormattedDate(tmp);
                                data.start_time      = start_time;
                                data.end_time        = end_time;
                                data.late_minutes    = late_minutes;
                                data.rest_start_time = rest_start_time;
                                data.rest_end_time   = rest_end_time;
                                
                                $('#modal_edit [name="table_item_list"] tbody').append(newItem(data));       
                            }
                            
                            $('#modal_query').modal('hide');
                            $('#modal_edit').modal('show');
                            break;
                    }
                }
                return false;
            });
            
            $('#form_edit').validate({
                errorElement: 'span', //default input error message container
                errorClass: 'help-block help-block-error', // default input error message class
                focusInvalid: false, // do not focus the last invalid input
                ignore: "",  // validate all fields including form hidden input

                invalidHandler: function (event, validator) { //display error alert on form submit
                    $('#form_success_alert').hide();
                    $('#form_error_alert').show();
                    $('.modal').scrollTop($('#form_error_alert'));
                },

                highlight: function (element) { // hightlight error inputs
                   $(element)
                        .closest('.form-group').addClass('has-error'); // set error class to the control group
                },

                unhighlight: function (element) { // revert the change done by hightlight
                    $(element)
                        .closest('.form-group').removeClass('has-error'); // set error class to the control group
                },

                success: function (label) {
                    label
                        .closest('.form-group').removeClass('has-error'); // set success class to the control group
                },

                submitHandler: function (form) {
                    $('#form_success_alert').show();
                    $('#form_error_alert').hide();
                    
                    //確認表單正確，Ajax送出
                    $.ajax({
                        type: 'POST',
                        dataType: 'json',
                        url: "{{ route('manage::ehr::update_schedule') }}",
                        data: $("#form_edit").serialize(),
                        success: function(sendback){
                            $('#modal_edit').modal('hide');
                            window.location.reload();
                        },
                        error   : function ( data )
                        {
                            toastr['error']('排班失敗！');
                        }
                    });
                }
            });
        });
        
        var newItem = function(data, removeLastTd) {
            if (typeof removeLastTd == 'undefined') removeLastTd = false;
            
            var template = $('#itemTemplate tbody tr').clone();
            $(template).find('.item-id').val(data.id);
            $(template).find('.item-shift').val(data.shift);
            $(template).find('.item-ehr-date').val(data.ehr_date);
            $(template).find('.item-start-time').val(data.start_time);
            $(template).find('.item-end-time').val(data.end_time);
            $(template).find('.item-late-minutes').val(data.late_minutes);
            $(template).find('.item-rest-start-time').val(data.rest_start_time);
            $(template).find('.item-rest-end-time').val(data.rest_end_time);
            $(template).find('label.shift').text(data.shiftText);
            $(template).find('label.ehr-date').text(data.ehr_date);
            $(template).find('label.start-time').text(data.start_time);
            $(template).find('label.end-time').text(data.end_time);
            if (typeof data.status_name == 'undefined') {
                $(template).find('.td-status-name').remove();
            } else {
                $(template).find('label.status-name').text(data.status_name);
            }
            
            $('.btn_delete_item', template).click(function() {
                $(this).parents('tr').remove();
            });
            
            if (removeLastTd) {
                template.find('td:last-child').remove();   
            }
            
            return template;   
        }
        
        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":"動作"},
                ],
                "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;
        }
    </script>
@endsection