@include('util.head')

@include('util.nav_bar_rc')
<div class="container">
  <div class="jumbotron">
    <!-- <h1>Open a New Group</h1>  -->
    <p>Fill out this form to open a new group. Once submitted, your new group will immediately be ready to begin collecting Assessments.</p> 
  </div>
 
  @if($eCode !== "")
    <p align='center'>
        <img src='../images/system/icon_ex.gif'>&nbsp;<b>More information is required.</b><br>
        <font class='formFieldReq'><b>{{ eText($eCode) }}</font><br>&nbsp;
    </p>
    @else
        {{-- Your else content goes here --}}
    @endif

    @if($eCode !== "")
        <img src='../images/system/icon_ex.gif'>&nbsp;<b>More information is required.</b><br>
        <font class='formFieldReq'><b>{{ eText($eCode) }}</font><br>&nbsp;
    @endif


<form method="post" role="form" action="/create-group-request" name="editForm" id="editForm">
@csrf
<input type="hidden" name="frameName" value="{{$frameName}}"> 
<input type="hidden" name="dateAdded" value="{{$dateAdded}}"> 
<input type="hidden" name="acceptOffers" value="{{$acceptOffers}}"><!-- default -->
<div class="row">
<div class="col-sm-7">
	<div class="row">
		<div class="col-sm-12">
			<div class="form-group has-feedback">
			<label for="inputName" class="control-label">Name or Title of Group <span class="btn-link" data-toggle="popover" data-trigger="hover" title="Group name" data-content="Please enter the name or title of the group.</br><br />Exmple: Middle Managers at XYZ Corp." data-html="true" data-placement="auto"><span class='glyphicon glyphicon-info-sign'></span></span></label>
			<input type="text" name="groupName" class="form-control" id="groupName" value="{{$groupName}}" maxlength="100" required data-minlength="10" data-error="Minimum 10 characters" tabindex="1">
			<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
			<div class="help-block with-errors"></div>
			</div>
		 </div>
	</div>
	<div class="row">
		<div class="col-sm-12">
		  <div class="form-group has-feedback">
		    <label for="inputName" class="control-label">Organization Name Associated with Group <span class="btn-link" data-toggle="popover" data-trigger="hover" title="Company name" data-content="Enter the name of the company/group/organization for which you will be administering the Assessments.<br /><br />Examples: XYZ Corporation / Cal State Business Management Class #265 " data-html="true" data-placement="auto"><span class='glyphicon glyphicon-info-sign'></span></span></label>
		    <input type="text" class="form-control" name="companyName" value="{{$companyName}}" maxlength="50" tabindex="2" required data-minlength="3">
		    <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
		  </div>
		</div>
	</div>
	<div class="row">
		<div class="col-sm-12">
		  <div class="form-group has-feedback">
		    <label for="inputName" class="control-label">Group Description <span class="btn-link" data-toggle="popover" data-trigger="hover" title="Group Description" data-content="Please briefly describe the nature of this group/project.<br /><br />Example: I plan on performing an analysis of middle managers at XYZ Company to understand better the relationship between them and their subordinates. This group will represent the middle managers." data-html="true" data-placement="auto"><span class='glyphicon glyphicon-info-sign'></span></span></label>
		    <textarea type="textarea" class="form-control" name="accountNotes"  required data-minlength="30" data-error="Please enter at least 30 characters" tabindex="3">{{$accountNotes}}</textarea>
		    <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
		    <div class="help-block with-errors"></div>
		  </div>
	  </div>
	</div>
</div>
<div class="col-sm-offset-1 col-sm-4">
	<div class="form-group">
	<label for="resultsAccess" class="control-label">View Results Instantly
	<span data-toggle="popover" data-trigger="hover" title="Results Viewing" data-content="Should your participants be able to view their Assessment results instantly? If not, they will not be able to see their results unless you provide them with a hard copy or enable their access at a later time.<br /><br />This setting does not apply to 360 group evaluators/aspirational evaluators.<br /><br /><strong>You can change this setting later from within the Resource Center.</strong>" data-html="true" data-placement="auto" class="btn-link"><span class='glyphicon glyphicon-info-sign'></span></span></label>     
	<div class="checkbox">
	  <label>
	    <input type="checkbox" name="resultsAccess" value="true" tabindex="4">
	    Yes, participants will view their results online
	  </label>
	  <div class="help-block with-errors"></div>
	</div>
	</div>

	<div class="form-group has-feedback">
	<label for="inputName" class="control-label">Group Rate: which best describes your group?</label>
	<div class="form-inline row">
		<div class="form-group col-sm-6">
		    <select class="form-control" id="orderTypeID" name="orderTypeID" tabindex="5" required>
		    <option value=""></option>

            @foreach ($orderTypes as $orderType)
                                                            <option value="{{ $orderType->orderTypeID }}">
                                                                {{ $orderType->orderType }}
                                                            </option>
                                                        @endforeach
			    </select>
			</div>
		</div>
	<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
	<div class="help-block with-errors"></div>
	</div>


	<div class="form-group has-feedback">
	<label for="inputName" class="control-label">End Date <span class="btn-link" data-toggle="popover" data-trigger="hover" title="End date" data-content="Your group will automatically close on this date, which means it will no longer be able to receive Assessments.<br /><br /><strong>You can change this date in the Resource Center.</strong>" data-html="true" data-placement="auto"><span class='glyphicon glyphicon-info-sign'></span></span></label>
	<div class='input-group date form-group has-feedback input-append' id="dp" style="clear: none;">
	    <input type='date' class="form-control" value="{{$dateEndText}}" tabindex="6" name="dateEnd" id="dateEnd"  style='background-color: #fff;cursor: pointer;' required  />
	    
	</div>
	<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
	<div class="help-block with-errors"></div>
	</div>	
</div>
</div>
<div class="form-group">
    <label for="underwear" class="control-label">Group Type 
        <span class="btn-link" data-toggle="popover" data-trigger="hover" title="Group Types" 
            data-content="There are two types of groups: Standard and 360.<br /><br />
            A Standard group consists of at least one of the following: ASI, OASI, ASSET, Aspirational ASI, or Aspirational ASI OASI.<br /><br />
            A 360 group contains a focal person and one or more evaluators." 
            data-html="true" data-placement="auto">
            <span class='glyphicon glyphicon-info-sign'></span>
        </span>
    </label> 
    <div class="radio">
        <label>
            <input type="radio" name="grpType" id="grpTypeASI" value="grpASI" tabindex="7" 
                onclick="chgGrp('grpASI');" required>
            Standard (ASI, OASI, ASSET, or Aspirational ASI/OASI)
        </label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" name="grpType" id="grpType360" value="grp360" tabindex="8" 
                onclick="chgGrp('grp360');"  required>
            360 (360 Focus Group or Aspirational 360 Group)
        </label>
    </div>
</div>

<div id="grpASI" @if($grpType !== 'grpASI') style="display:none" @endif>
    <div class="row">
        <div class="col-sm-8">
            <div class="panel panel-default">
                <div class="panel-heading">Standard Assessment Type (ASI, OASI, ASSET, or Aspirational ASI/OASI)</div>
                <div class="panel-body">
                    <div class="form-group">
                        <label class="col-sm-12">Expected number of participants
                            <a href="#" data-toggle="popover" data-trigger="hover" title="Expected" data-content="Please enter the expected number of participants for each Assessment. If you do not wish to use a particular Assessment type, leave it blank." data-html="true" data-placement="auto"><span class='glyphicon glyphicon-info-sign'></span></a>
                            <div class="form-group">
                                <input type="hidden" id="grpTypeStdExpTotal" class="form-control" data-minlength="1" data-error="Please put in at least one expected participant for this group">
                                <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
                                <div class="help-block with-errors text-left"></div>
                            </div>
                        </label>
                    </div>

                    <div class="col-sm-2"><input type="number" name="asiUsers" class="form-control text-center groupCountStd expectedInput" maxlength="6" tabindex="9"><div class="help text-center">ASI</div></div>
                    <div class="col-sm-2"><input type="number" name="oasiUsers" class="form-control text-center groupCountStd expectedInput" maxlength="6" tabindex="10"><div class="help text-center">OASI</div></div>
                    <div class="col-sm-2"><input type="number" name="aspAsiUsers" class="form-control text-center groupCountStd expectedInput" maxlength="6" tabindex="11"><div class="help text-center">A-ASI</div></div>
                    <div class="col-sm-2"><input type="number" name="aspOasiUsers" class="form-control text-center groupCountStd expectedInput" maxlength="6" tabindex="12"><div class="help text-center">A-OASI</div></div>
                    <div class="col-sm-2"><input type="number" name="assetPosUsers" class="form-control text-center groupCountStd expectedInput" maxlength="6" tabindex="13"><div class="help text-center">ASSET Position</div></div>
                    <div class="col-sm-2"><input type="number" name="assetTaskUsers" class="form-control text-center groupCountStd expectedInput" maxlength="6" tabindex="14"><div class="help text-center">ASSET Task</div></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="grp360" @if($grpType !== 'grp360') style="display:none" @endif>
    <div class="row">
    <div class="col-sm-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="checkbox">
                        <div class="form-group">
                            <label>
                                <input type="checkbox" class="grpType360Selector" name="grpType360Chkbx" id="grpType360Chkbx" value="1" tabindex="4" data-error="You have chosen a 360 group type; therefore, you must check this box and/or the Aspirational 360 Focus Group box to proceed.">360 Focus Group
                            </label>
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>
                </div>
                <div class="panel-body panel-body-13EF hidden">
                    <div class="row">
                        <div class="form-group">
                            <label class="col-sm-12">Expected number of participants
                            <a href="#" data-toggle="popover" data-trigger="hover" title="Expected" data-content="Please enter the expected number of evaluators for this Assessment." data-html="true" data-placement="auto"><span class='glyphicon glyphicon-info-sign'></span></a>
                            </label>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-3"><input type="text" class="form-control text-center" value="1" readonly><div class="help text-center">ASI</div></div>
                        <div class="col-sm-3"><div class="form-group"><input type="number" name="fp360Users" id="fp360Users" class="form-control text-center groupCount360 requiredFor360 expectedInput" tabindex="15"><div class="help text-center">Evaluators</div></div></div>
                    </div>

                    <div class="row" style="margin-top:20px;">
                        <div class="form-group">
                            <label class="col-sm-12">Focal Person Info
                            <a href="#" data-toggle="popover" data-trigger="hover" title="Expected" data-content="Please enter the expected number of participants for each Assessment." data-html="true" data-placement="auto"><span class='glyphicon glyphicon-info-sign'></span></a></label>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-4">
                            <div class="form-group">
                            <select name="fpgender" tabindex="16" class="form-control requiredFor360">
                            <option value=""></option>
                            <option value="F" {{ old('fpgender') == 'F' ? 'selected' : '' }}>Female</option>
                            <option value="M" {{ old('fpgender') == 'M' ? 'selected' : '' }}>Male</option>
                        </select>
                        <div class="help text-left">Gender</div>
                            </div>
                        </div>
                        <div class="col-sm-4"><div class="form-group"><input type="text" name="fpfirstName" id="fpfirstName" tabindex="17" maxlength="30" class="form-control requiredFor360" data-minlength="1"><div class="help text-left">First name</div></div></div>
                        <div class="col-sm-4"><div class="form-group"><input type="text" name="fplastName" id="fplastName" tabindex="18" maxlength="30" class="form-control requiredFor360" data-minlength="1"><div class="help text-left">Last name</div></div></div>
                    </div>

                    <div class="row" style="margin-top:20px;">
                        <div class="form-group">
                            <label class="col-sm-12">Is the focal person familiar with the Achieving Styles Model / or has previously taken an Achieving Styles Inventory? Please provide relevant information.
                                <textarea type="textarea" name="fpinfo" tabindex="19" class="form-control" id="inputName"></textarea>            
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="checkbox">
                        <div class="form-group">
                            <label>
                                <input type="checkbox" class="grpType360Selector" name="grpTypeAsp360Chkbx" id="grpTypeAsp360Chkbx" value="1" tabindex="4" data-error="You have chosen a 360 group type; therefore, you must check this box and/or the 360 Focus Group box to proceed.">Aspirational 360 Focus Group
                            </label>
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>
                </div>
                <div class="panel-body panel-body-13AEF hidden">

                    <div class="row">
                        <div class="form-group">
                            <label class="col-sm-12">Expected number of participants
                            <a href="#" data-toggle="popover" data-trigger="hover" title="Expected" data-content="Please enter the expected number of aspirational evaluators for this Assessment. If you do not wish to use this particular Assessment, leave it blank or 0" data-html="true" data-placement="auto"><span class='glyphicon glyphicon-info-sign'></span></a></label>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-3"><input type="text" class="form-control text-center" value="1" readonly><div class="help text-center">A-ASI</div></div>
                        <div class="col-sm-3"><div class="form-group"><input type="number" name="aspFp360Users" id="aspFp360Users" class="form-control text-center groupCount360 requiredForAsp360 expectedInput" tabindex="20"><div class="help text-center">A-Evaluators</div></div></div>
                    </div>

                    <div class="row" style="margin-top:20px;">
                        <div class="form-group">
                            <label class="col-sm-12">Aspirational Focal Person Info
                            <a href="#" data-toggle="popover" data-trigger="hover" title="Expected" data-content="Please enter the expected number of participants for each Assessment. If you do not wish to use a particular Assessment type, leave it blank or 0" data-html="true" data-placement="auto"><span class='glyphicon glyphicon-info-sign'></span></a></label>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-4">
                            <div class="form-group">
                                <select name="aspfpgender" tabindex="21" class="form-control requiredForAsp360">
                                <option value=""></option>
                                <option value="F" @if(old('fpgender') == 'F') selected @endif>Female</option>
                                <option value="M" @if(old('fpgender') == 'M') selected @endif>Male</option>
                                </select>
                                <div class="help text-left">Gender</div>
                            </div>
                        </div>
                        <div class="col-sm-4"><div class="form-group"><input type="text" name="aspfpfirstName" id="aspfpfirstName" tabindex="22" maxlength="30" class="form-control requiredForAsp360" data-minlength="1"><div class="help text-left">First name</div></div></div>
                        <div class="col-sm-4"><div class="form-group"><input type="text" name="aspfplastName" id="aspfplastName" tabindex="23" maxlength="30" class="form-control requiredForAsp360" data-minlength="1"><div class="help text-left">Last name</div></div></div>
                    </div>

                    <div class="row" style="margin-top:20px;">
                        <div class="form-group">
                            <label class="col-sm-12">Is the aspirational focal person familiar with the Achieving Styles Model / or has previously taken an Achieving Styles Inventory? Please provide relevant information.
                                <textarea type="textarea" name="aspfpinfo" class="form-control" id="aspfpinfo" tabindex="24"></textarea>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="row">
	<div class="col-sm-12 text-center">
		<div class="form-group"><button type="submit" id="btnSubmit" class="btn btn-primary btn-lg" value="Request a New Group" tabindex="25" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Processing">Create New Group</button></div>
	<hr>
	</div>
</div>	
</form>

<!--#include virtual='/ssi/responsive/footer.asp'-->

<script type="text/javascript">
$(document).ready(function(){
	$(".navPages").removeClass("active");
	$("#navCNG").addClass("active");

	$('[data-toggle="popover"]').popover();
	$('#editForm').validator();

	$('#editForm').validator().on('submit', function (e) {
	  if (e.isDefaultPrevented()) {
	    // handle the invalid form...
	  } else {
	  		$("#btnSubmit").button('loading');
	  }
	})
	
	//form validator config
	$("#grpTypeASI").click(function(){
		$("#grpTypeStdExpTotal").attr("data-validate","true");
		$("#grpType360Selector").attr("data-validate","false");
		$("#grpType360Chkbx").attr("data-validate","false");
		$("#grpTypeAsp360Chkbx").attr("data-validate","false");
		$(".requiredFor360").attr("data-validate","false");
		$(".requiredForAsp360").attr("data-validate","false");
		$(".panel-body-13EF").addClass('hidden')
		$(".panel-body-13AEF").addClass('hidden')
		$('#editForm').validator('update')

		$( ".groupCountStd" ).change(function() {
			var total = 0;
			$('input.groupCountStd').each(function() {
			    var num = parseInt(this.value, 10);
			    if (!isNaN(num)) {
			        total += num;
			    }
			});

			$("#grpTypeStdExpTotal").val(total);
		});
	});

	$("#grpType360").click(function(){
		$("#grpTypeStdExpTotal").attr("data-validate","false");
		$(".grpType360Selector").attr("data-validate","true");
		$('#editForm').validator('update');
	});

	$( ".grpType360Selector" ).change(function() {
		if ( $('#grpType360Chkbx').prop('checked')==true && $('#grpTypeAsp360Chkbx').prop('checked')==true){
			$(".requiredFor360").attr("data-validate","true");
			$(".requiredForAsp360").attr("data-validate","true");
			$("#grpType360Chkbx").attr("data-validate","true");
			$("#grpTypeAsp360Chkbx").attr("data-validate","true");
			$(".panel-body-13EF").removeClass('hidden')
			$(".panel-body-13AEF").removeClass('hidden')
			$('#editForm').validator('update');

			} else if ( $('#grpType360Chkbx').prop('checked')==true && $('#grpTypeAsp360Chkbx').prop('checked')==false )
				{
					$(".requiredFor360").attr("data-validate","true");
					$(".requiredForAsp360").attr("data-validate","false");
					$(".requiredForAsp360").val("");
					$("#grpType360Chkbx").attr("data-validate","true");
					$("#grpTypeAsp360Chkbx").attr("data-validate","false");
					$(".panel-body-13EF").removeClass('hidden')
					$(".panel-body-13AEF").addClass('hidden')
					$('#editForm').validator('update');

				} else if ( $('#grpType360Chkbx').prop('checked')==false && $('#grpTypeAsp360Chkbx').prop('checked')==true )
					{
						$(".requiredFor360").attr("data-validate","false");
						$(".requiredFor360").val("");
						$(".requiredForAsp360").attr("data-validate","true");
						$("#grpType360Chkbx").attr("data-validate","false");
						$("#grpTypeAsp360Chkbx").attr("data-validate","true");
						$(".panel-body-13EF").addClass('hidden')
						$(".panel-body-13AEF").removeClass('hidden')
						$('#editForm').validator('update');

					} else if ( $('#grpType360Chkbx').prop('checked')==false && $('#grpTypeAsp360Chkbx').prop('checked')==false){
						$("#grpType360Chkbx").attr("data-validate","true");
						$("#grpTypeAsp360Chkbx").attr("data-validate","true");
						$(".requiredFor360").val("");
						$(".requiredForAsp360").val("");
						$(".panel-body-13EF").addClass('hidden')
						$(".panel-body-13AEF").addClass('hidden')
						$('#editForm').validator('update');
						}
		$('#editForm').validator('update');
	});

	// prevent the user from putting in negative values or 0 in the expected field
	$( ".expectedInput" ).change(function() {
		var value = $( this ).val();

		if (value.indexOf('-') > -1)
		{
			$( this ).val("")
		}
		
		//prevent user from entering 0
		if (value == 0)
		{
			$( this ).val("")
		}		
	});
});

$(function () {

		var tomorrow = new Date();
		tomorrow.setDate(tomorrow.getDate() + 1);

		var dd = tomorrow.getDate();
		var mm = tomorrow.getMonth()+1; //January is 0!
		var yyyy = tomorrow.getFullYear();

		if(dd<10) {
		    dd = '0'+dd
		} 

		if(mm<10) {
		    mm = '0'+mm
		} 

		var tomorrowDate = mm + '/' + dd + '/' + yyyy;

	var today = new Date();
	$('#dp').datepicker({
		format: 'm/d/yyyy',
        numberOfMonths: 2,
		todayHighlight: true,
		todayBtn: true,
		showButtonPanel: true,
		startDate: tomorrowDate,
		autoclose: true
	})
});

function updateRequiredFields() {
    if ($('#grpTypeASI').is(':checked')) {
        // Show Standard, hide 360
        $('#grpASI').show();
        $('#grp360').hide();
        // Standard fields required
        $('.groupCountStd').attr('required', true);
        $('#grpTypeStdExpTotal').attr('required', true);
        // 360 fields not required
        $('.grpType360Selector, .groupCount360, .requiredFor360, .requiredForAsp360').removeAttr('required');
        $('#grpType360Chkbx, #grpTypeAsp360Chkbx, #fp360Users, #fpfirstName, #fplastName, #aspFp360Users, #aspfpfirstName, #aspfplastName').removeAttr('required');
    } else if ($('#grpType360').is(':checked')) {
        // Show 360, hide Standard
        $('#grpASI').hide();
        $('#grp360').show();
        // 360 checkboxes required
        $('.grpType360Selector').attr('required', true);
        // Standard fields not required
        $('.groupCountStd').removeAttr('required');
        $('#grpTypeStdExpTotal').removeAttr('required');
        // For 360, only make visible fields required
        if ($('#grpType360Chkbx').is(':checked')) {
            // 360 Focus Group required fields
            $('#fp360Users, #fpfirstName, #fplastName').attr('required', true);
        } else {
            $('#fp360Users, #fpfirstName, #fplastName').removeAttr('required');
        }
        if ($('#grpTypeAsp360Chkbx').is(':checked')) {
            // Aspirational 360 required fields
            $('#aspFp360Users, #aspfpfirstName, #aspfplastName').attr('required', true);
        } else {
            $('#aspFp360Users, #aspfpfirstName, #aspfplastName').removeAttr('required');
        }
    }
}
$(document).ready(function() {
    updateRequiredFields();
    $('#grpTypeASI, #grpType360').on('change', updateRequiredFields);
    $('#grpType360Chkbx, #grpTypeAsp360Chkbx').on('change', updateRequiredFields);
});
</script>
</div>
</body>
</html>