@extends('layouts.master')
@section('link')
<link href="{!! asset('css/basicsetting/evaluation.css') !!}" rel="stylesheet">
<link href="{!! asset('css/common/com004.css') !!}" rel="stylesheet">
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-range/3.0.3/moment-range.min.js"></script> -->
<script src="{!! asset('js/moment-range.min.js') !!}"></script>
@stop
@include('layouts.header')

@section('content')
<script type="text/javascript">
$(function(){
	$(document).ready(function(){ 
		window['moment-range'].extendMoment(moment);
		$('#datetimepicker1 , #datetimepicker2').datetimepicker({
			viewMode: 'months',
			format: 'YYYY/MM',
			locale: 'ja'
		});

		var checkDuplicate = function(sYear, sMonth, eYear, eMonth){
			// Dont allow regist the same period (duplicate)-START
			var isDup = false;
			var textTrim = $.trim($('#data-list').text());			
			var lineSpace = textTrim.replace(/(?:\r\n|\r|\n)/g, ' ');
			var lines = textTrim.replace(/(?:～)/g, ' ');
			var arrWithSpace = lines.split(/(\s)+/);
			var arrNoSpace = arrWithSpace.filter(function(val){return val.trim()});

			// Input period
        	var startInput = new Date(sYear, sMonth - 1, 01);
            var endInput   = new Date(eYear, eMonth - 1, 01);
            var rangeInput = moment.range(startInput, endInput);
            
			for (var i=0; i<arrNoSpace.length/2; i++){
				var strStartPeriod = arrNoSpace[(i*2)];
            	var strEndPeriod = arrNoSpace[(i*2+1)];
            	
		        if(strStartPeriod.length > 0 && strEndPeriod.length > 0){
        			var yearPeriodS = strStartPeriod.slice(0, 4);
        			var monthPeriodS = strStartPeriod.slice(5, 7);
        			var yearPeriodE = strEndPeriod.slice(0, 4);
        			var monthPeriodE = strEndPeriod.slice(5, 7);

        			// Exist period
//         			var startExist = moment(strStartPeriod, 'YYYY-MM-DD');
//                 	var endExist   = moment(strEndPeriod, 'YYYY-MM-DD');
                	var startExist = new Date(yearPeriodS, monthPeriodS - 1, 01);
                    var endExist   = new Date(yearPeriodE, monthPeriodE - 1, 01);
                	var rangePeriodExist = moment.range(startExist, endExist);

                    var adjacent = rangePeriodExist.adjacent(rangeInput);
                    var isOvelaps = rangePeriodExist.overlaps(rangeInput);
                 	// Duplicate -> show error
        		    if(isOvelaps || adjacent){
        		    	$('#editionMsg').html('<p class="alert alert-danger">{{ Message::get("E00045") }} <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a></p>');
                    	window.scrollTo(0, 0);
                    	return true;		
            		}
            		
					// Duplicate -> show error
//         		    if(sYear === yearPeriodS && sMonth === monthPeriodS && eYear === yearPeriodE && eMonth === monthPeriodE){
//         		    	$('#editionMsg').html('<p class="alert alert-danger">{{ Message::get("E00045") }} <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a></p>');
//                     	window.scrollTo(0, 0);
//                     	return true;		
//             		}	    
		        }
				
			}
	     	// Dont allow regist the same period (duplicate)-END
		};

		$('#addBtn').on('click',  function(e){ 

			var sDate = $('#startDate').val();
			var eDate = $('#endDate').val();
			var years = moment(eDate + '/01').diff(sDate + '/01', 'month', true);
			
        	if('' !== sDate && '' !== eDate){
        		$('#editionMsg').html('');
        		var sYear = moment(sDate).format('YYYY');
    			var sMonth = moment(sDate).format('MM');
    			var eYear = moment(eDate).format('YYYY');
    			var eMonth = moment(eDate).format('MM');
    			
        		// Check limit endDate (<= next year/March)-START
    			var endYear = moment(eDate).format('YYYY');
    			var endMonth = moment(eDate).format('MM');
    			
                // 評価期間が追加されている場合
                if ($('#newStartDate').val() != null || $('#newEndDate').val() != null){
                    $('#editionMsg').html('<p class="alert alert-danger">{{ Message::get("E00093", ["Field" => "評価期間", "Count" => "一つ"]) }} <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a></p>');
                    window.scrollTo(0, 0);
                    return false;
                }

    			if ( sYear * 1 < endYear * 1  && 3 < endMonth * 1 ){
    				$('#editionMsg').html('<p class="alert alert-danger">{{ Message::get("E00044") }} <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a></p>');
                	window.scrollTo(0, 0);
    				return false;
    			}else if(sYear * 1 === endYear * 1){
        			if( sMonth * 1 < 4 && 3 < endMonth * 1 ){
        				$('#editionMsg').html('<p class="alert alert-danger">{{ Message::get("E00062") }} <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a></p>');
                    	window.scrollTo(0, 0);
        				return false;
        			}	
    			}	
    			// Check limit endDate (<= next year/March)-END

	     		var isDuplicate = checkDuplicate(sYear, sMonth, eYear, eMonth);
	     		if(isDuplicate){
		     		return false;
	     		}else if(moment(eDate).diff(sDate, 'month') >= 0){
            		if(years > 12){
            			$('#editionMsg').html('<p class="alert alert-danger">{{ Message::get("E00024") }} <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a></p>');
                    	window.scrollTo(0, 0);
                    	return false;
                	}	

        			// Execute add date string
                    var strSDateHdd = '<input name="newStartDate[]" id="newStartDate" type="hidden" value="'+sDate+'">';
                    var strEDateHdd = '<input name="newEndDate[]" id="newEndDate" type="hidden" value="'+eDate+'">';

        			$('#data-list').prepend(strSDateHdd + strEDateHdd);
        			$('#data-list').prepend('<span style="font-weight: bold;">'+sYear+'年'+sMonth+'月</span><label class="space-data"> ～ </label><span style="font-weight: bold;">'+eYear+'年'+eMonth+'月 </span><br>');
        			e.preventDefault();
        		}else{
        			$('#editionMsg').html('<p class="alert alert-danger">{{ Message::get("E00022") }} <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a></p>');
                	window.scrollTo(0, 0);
                	return false;
        		}	
        	}else{
        		$('#editionMsg').html('<p class="alert alert-danger">{{ Message::get("E00023") }} <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a></p>');
            	window.scrollTo(0, 0);
        		return false;
        	}
			
		});
		
		$('#updateBtn').on('click',  function(e){
			e.preventDefault();
			$('#SubmitModal').modal('show');
		});

		$('#close').on('click',  function(e){
			$('#SubmitModal').modal('hide');
			e.preventDefault();
		});

        $('#SubmitOK').on('click',function(){

            jQuery.ajaxSetup({
                header: jQuery('meta[name="csrf-token"]').attr('content')
            });

            var pass = $('#SubmitPassword').val();
            $.ajax({
                type: 'GET',
                url: '{{route("get.basicEvaluation.confirm.check")}}',
                data: {pass:pass},
                dataType: 'json',
                success: function(data){
                    if(data == true){
                        var fm = document.getElementById('evaluationFrm');
                        fm.submit();
                    }else{
                        $('#ErrorModal').modal('show');
                    }
                }
            });
        });
	});
});
</script>

<div class="container">
<!-- 	<div class="col-xs-12"> -->
<!-- 		<h4><strong>アカウント設定</strong></h4> -->
<!-- 	</div> -->
	<div id="content-body" class="row">
		<div class="flash-message" id="editionMsg">
			@foreach (['danger', 'warning', 'success', 'info'] as $msg)
    			@if(Session::has('alert-' . $msg))
    			<p class="alert alert-{{ $msg }}">
    				{{ Session::get('alert-' . $msg) }} <a href="#" class="close"
    					data-dismiss="alert" aria-label="close">&times;</a>
    			</p>
    			@endif
			@endforeach
		</div>
		{!! Form::open(array('url'=>'/basic/evaluation/', 'class'=>'form-inline', 'name'=>'evaluationFrm', 'id'=>'evaluationFrm')) !!}
		<div id="data-container" class="col-xs-12 row">
			<div id="data-record" class="col-xs-12 data-record">
				<span class="text-danger clearfix" id="FirstNameMsg">{{$errors->first('startDate')}}</span>
				<span class="text-danger clearfix" id="FirstNameMsg">{{$errors->first('endDate')}}</span>
				<div class="long-data-header col-xs-12">
					新しい評価期間を追加する際、これまでの評価期間におけるデータ入力ができなくなってしまいますので、ご注意ください。
				</div>
				<br/>
				<div class="medium-data-header  date-header col-xs8 ">
					<label class="data-header">評価期間の設定 </label>
					<div class="date-group">
						<div class=''>
							<div class="form-group">
								<div class='input-group date' id='datetimepicker1'>
									<input type='text' name="startDate" id="startDate" class="form-control" />
									<span class="input-group-addon">
									<span class="glyphicon glyphicon-calendar"></span>
									</span>
								</div>
							</div>
						</div>
						<label>～</label>
						<div class='col-xs-3'>
							<div class="form-group">
								<div class='input-group date' id='datetimepicker2'>
									<input type='text' name="endDate" id="endDate" class="form-control" />
									<span class="input-group-addon">
									<span class="glyphicon glyphicon-calendar"></span>
									</span>
								</div>
							</div>
						</div>
					</div>

					<div class="col-xs-2 add-button">		
						<a id="addBtn" class="btn btn-primary" href="#">追加</a>
					</div>

					<br/>
				</div>
			</div>
			<div id="data-record" class="col-xs-12">
    			<div id="data-header" class="col-xs-2">
    				<label>これまでの評価期間</label>
    			</div>
    			@if($evals)
        			<div id="data-list" class="col-xs-4">
            			@foreach ($evals as $eval)
        					{{ date('Y', strtotime($eval->start_date)).'年'.date('m', strtotime($eval->start_date)).'月' }}<label class="space-data"> ～ </label>{{ date('Y', strtotime($eval->end_date)).'年'.date('m', strtotime($eval->end_date)).'月' }}
        					<br/>
    					@endforeach
					</div>
				@else
					<div class="col-xs-4">
					 	<p class="alert alert-info">評価期間はありません!</p>
					</div>
				@endif
			</div>
			<div class="col-xs-12 text-right">
				<div id="submit-holder" class=" col-xs-12">
					<a id="updateBtn" class="btn btn-primary" href="javascript:void()"> 確 定</a>
				</div>
			</div>
		</div>
		{!! Form::close() !!}	
	</div>
    <div id="ErrorModal" class="modal fade in" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 id="modalTitle" class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    パスワードが不正です。
                </div>
                <div class="modal-footer">
                    <a id="BackClose" class="btn btn-default" data-dismiss="modal"><i class="fa fa-close"></i> OK</a>
                </div>
            </div>
        </div>
    </div>
    <div id="SubmitModal" class="modal fade in" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 id="modalTitle" class="modal-title">確定用パスワード入力</h4>
                </div>
                <div class="modal-body submit-modal-title">
                    <div class="col-xs-12 inner-col-content submit-message">
                        *確定にはパスワードが必要です。
                    </div>
                    <div class="col-xs-12 inner-col-content submit-content">
                        <h5 id="SubmitHeader">パスワード</h5>
                        <input name ='Password' id="SubmitPassword" type="password" class=" form-control">
                    </div>
                </div>
                <div class="modal-footer">
                    <a id="SubmitBack" class="btn btn-default" data-dismiss="modal"><i class="fa fa-close"></i>  戻る</a>
                    <a id="SubmitOK" onclick="" class="btn btn-primary" data-dismiss="modal"><i class="fa "></i>確定</a>
               </div>
            </div>
        </div>
    </div>
</div><!-- /.bs-docs-main -->
@stop
@include('layouts.footer')