<?
/**
  * This framework has been created for a multitude of grant research websites.
  *
  * @copyright 2016-2021 Synergy Pro Marketing
  * @author Aaron Campbell <aaron@synergymentoring.com>
  *	@license None, All Rights Reserved
  * @package Business
  */
  include_once($_SERVER['DOCUMENT_ROOT']."/vx/lib/inc.php");
  track_member_action('Page Visit','Account Settings');
?>
<div class="rb white-bg p20" ng-controller="Members">
	<div class="rb">
		<div class="rb <?=$phone ? 'pt20' : ''?> f24 bold left">
			<div class="relative iblock glyphicons glyphicons-cogwheel f26" style="top:-4px;"></div>
			<div class="relative iblock" style="top:-1px; margin-left:7px;">
				Account Settings
			</div>
		</div>
	</div>
    <div class="rb p20">

		<div class="rb center"> 
        	<form method="post" enctype="multipart/form-data" style="width:100%; height:100%;"
            	name="accountInformation"
            	ng-submit="saveAccount(userData)">
                <div id="accountErrors"class="relative iblock left red center bold f16" 
                	style="border-radius:4px; width:100%; max-width:700px; display:none;">                	
                </div>
                <div class="relative iblock left p20" style="padding-top:10px; width:100%; max-width:700px;">
                    <div class="rb f18 bold dark-gray">
                  		<div class="relative iblock glyphicons glyphicons-user f24"></div>
                        <div class="relative iblock" style="top:7px;">
                            Login Information
                        </div>
                    </div>
                    <br>
                    <div class="rb">
                        <div class="relative iblock">
                            <label>
                                Email Address
                                <br>
                                <input type="email" name="firstName" ng-model="userData.email" required/>
                            </label>
                        </div>
                        <br>
                        <div class="relative iblock">
                            <label>
                                Password
                                <br>
                                <input type="password" name="password" ng-model="userData.password" ng-required="userData.confirmPassword" ng-minlength="5" ng-maxlength="50"/>
                            </label>
                        </div>
                        <div class="relative iblock">
                            <label>
                                Confirm Password
                                <br>
                                <input type="password" name="confirmPassword" ng-model="userData.confirmPassword" ng-required="userData.password" ng-minlength="5" ng-maxlength="50"/>
                            </label>
                            <div class="absolute block p10 red-bg white f14 bold center" style="width:100%;"
                            	ng-show="userData.password != '' && userData.password != userData.confirmPassword && accountInformation.password.$touched && accountInformation.confirmPassword.$touched">
                            	Passwords Do Not Match
                            </div>
                        </div>
                        <div id="accountPassword" class="f12 bold green pt10" style="display:none; padding-left:4px;">
                        	Password Updated
                        </div>
                    </div>
                </div>
                <hr style="border-color:#BCBCBC; background-color:#BCBCBC;">
                <div class="relative iblock left p20" style="padding-top:10px; width:100%; max-width:700px;">
                    <div class="rb f18 bold dark-gray">
                    	<div class="relative iblock glyphicons glyphicons-nameplate f24"></div>
                        <div class="relative iblock" style="top:7px;">
                            Contact Information
                        </div>
                    </div>
                    <br>
                    <div class="rb">
                        <div class="relative iblock">
                            <label>
                                First Name
                                <br>
                                <input type="text" name="first" ng-model="userData.first" required/>
                            </label>
                        </div>
                        <div class="relative iblock">
                            <label>
                                Last Name
                                <br>
                                <input type="text" name="last" ng-model="userData.last" required
                                	style="width:<?=$phone ? 235 : 300?>px;"/>
                            </label>
                        </div>
                        <br>
                        <div class="relative iblock">
                            <label>
                                Street Address
                                <br>
                                <input type="text" name="address1" ng-model="userData.address1" required
                                    style="width:<?=$phone ? 235 : 300?>px;"/>
                            </label>
                        </div>
                        <div class="relative iblock">
                            <label>
                                City
                                <br>
                                <input type="text" name="city" ng-model="userData.city" required/>
                            </label>
                        </div>
                        <div class="relative iblock">
                            <label>
                                State
                                <br>
                                <select name="state" ng-model="userData.state" required>
                                    <option ng-repeat="state in states"
                                        ng-value="state.state" value="{{state.state}}">
                                        {{state.state}}
                                    </option>
                                </select>
                            </label>
                        </div>
                        <br>
                        <div class="relative iblock">
                            <label>
                                Phone Number
                                <br>
                                <input type="text" name="phone_1" ng-model="userData.phone_1" required phone-input/>
                            </label>
                        </div>
                        <div class="relative iblock">
                            <label>
                                Mobile Phone
                                <br>
                                <input type="text" name="phone_2" ng-model="userData.phone_2" phone-input/>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="rb right p20">
                	<button type="submit" class="btn btn-primary btn-lg">
                      	<div class="relative iblock fa fa-floppy-o"></div>
                        <div class="relative iblock" style="top:0px; margin-right:2px; margin-left:5px;">
                            Save
                        </div>
                    </button>
                </div>
            </form>
            <div id="accountSaving" class="absolute block cc" 
            	style="top:0px; left:0px; width:100%; height:100%; background-color:rgba(255,255,255,0.8); display:none;">
            	<div class="cd f18 bold red">
                	<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                    <br>
                    Saving...
                </div>
                <div class="cdl"></div>
            </div>
        </div>
    </div>
</div>
<?
	$title = "Account Settings : ".$siteName;
  	include_once($_SERVER['DOCUMENT_ROOT']."/vx/usa/layout/body.php");
?>