@extends('master')

@section('content')
	
	@if(isset($error))
		<div class="row">
			<div class="small-12 large-12 columns">
				<div data-alert class="alert-box alert">
	            {{{$error}}}
	            <a href="#" class="close">&times;</a> 
	          </div>			
			</div>
		</div>
	@endif


    <div class="row">
      	<div class="large-12 columns">
        	<h1>Provider Registration</h1>
      	</div>
    </div>

    <div class="row">
      <div class="small-12 medium-6 large-6 columns">
        <h4>This screen will allow you to register providers for your ChE Monitoring tools instance</h4>
      </div>
    </div>

    <div class="row">

    	<!-- <form action="{{{ URL::to('//localhost/ChE/Dashboard/public/registration/provider-applying') }}}" method="post" data-abide> -->
    	<!-- <form action="{{{ URL::to('//127.0.0.1/dashboard/registration/provider-applying') }}}" method="post" data-abide> -->
    	<form action="{{{ URL::to('registration/provider-applying') }}}" method="post" data-abide>

			<div class="small-12 medium-12 large-12  columns">
        
	        <!-- <form> -->

		         <div class="row">
	                <div class="small-12 medium-10 large-10 columns">
	                  <label>First Name</label>
	                  <input type="text" id="first_name" name="first_name" placeholder="" required pattern="[a-zA-Z]+" />
	                  <small class="error" data-error-message>First Name is required and must have no spaces.</small>
	                </div>
	                <div class="small-4 medium-2 large-2 end columns">
	                  <label>Middle Name</label>
	                  <input type="text" id="middle_name" name="middle_name" placeholder="" pattern="[a-zA-Z]+" />
	                  <small class="error" data-error-message>Must have no spaces.</small>
	                </div>
	                
	            </div>

	            <div class="row">
	            	<div class="small-12 medium-10 large-10 columns">
	                  <label>Last Name</label>
	                  <input type="text" id="last_name" name="last_name" placeholder="" required pattern="[a-zA-Z]+" />
	                  <small class="error" data-error-message>Last Name is required and must have no spaces.</small>
	                </div>
	                <div class="small-4 medium-2 large-2 end columns">
	                  <label>Title</label>
	                  <input type="text" id="provider_title" name="provider_title" placeholder="" pattern="[a-zA-Z]+" />
	                  <small class="error" data-error-message>Must have no spaces.</small>
	                </div>
	            </div>


	            <div class="row">
	            	<div class="small-12 medium-6 large-6 columns">
	            		<label>Email</label>
	            		<input type="email" id="provider_email" name="provider_email" placeholder="" required data-abide-validator="oehhaCheck" data-oehha-check="oehha-check" />
	            		<small class="error" data-error-message>Email format is incorrect. If OEHHA is checked, the email must belong to OEHHA</small>
	            	</div>
	            </div>
	            <div class="row">
	            	<div class="small-12 medium-6 large-6 columns">
	            		<label>Confirm Email</label>
	            		<input type="email" id="provider_email_conf" name="provider_email_conf" placeholder="" data-equalto="provider_email" required/>
	            		<small class="error" data-error-message>The email did not match</small>
	            	</div>
	            </div>

	            <!-- <div class="row">
	            	<div class="small-12 medium-6 large-6 columns">
	            		<label>Password</label>
	            		<input type="password" id="provider_password" name="provider_password" pattern=".{8,16}" placeholder="" required/>
	            		<small class="error" data-error-message>Password format is incorrect. 8 to 16 characters</small>
	            	</div>
	            </div>
	            <div class="row">
	            	<div class="small-12 medium-6 large-6 columns">
	            		<label>Confirm Password</label>
	            		<input type="password" id="provider_password_conf" name="provider_password_conf" pattern=".{8,16}" placeholder="" data-equalto="provider_password" required/>
	            		<small class="error" data-error-message>The password did not match</small>
	            	</div>
	            </div> -->


	            <div class="row">
	            	<div class="small-12 medium-6 large-6 end columns">
			            <label>User Role</label>
			            <select id="user_role" name="user_role">
							<option value="Administrator">Administrator</option>
							<!-- <option value="Provider">Provider</option>
							<option value="Staff">Staff</option> -->
						</select>
		            </div>
	            </div>

	            <div class="row">
	                <div class="large-12 columns">
	                  <hr>
	                  <h2>Address</h2>
	                </div>
	            </div>


		        <div id="address">

	              <div class="row">
	                  <div class="small-12 medium-12 large-12 columns">
	                    <label>Address 1</label>
	                    <input type="text" id="address1" name="address1" placeholder="" required  />
	                    <small class="error" data-error-message>Street is required and must be a string.</small>
	                  </div>
	                  
	              </div>

	              <div class="row">
	              	<div class="small-12 medium-12 large-12 columns">
	                    <label>Address 2</label>
	                    <input type="text" id="address2" name="address2" placeholder="" required  />
	                    <small class="error" data-error-message>Street is required and must be a string.</small>
	                </div>
	              </div>
	              <div class="row">
	                  <div class="small-12 medium-4 large-4 columns">
	                    <label>City</label>
	                    <input type="text" id="city" name="city" placeholder=""  />
	                    <small class="error" data-error-message>Must be a string.</small>
	                  </div>
	                  <div class="small-12 medium-4 large-4 columns">
	                    <label>State</label>
	                    <!-- <input type="text" id="state" name="state" placeholder=""/>
	                    <small class="error" data-error-message>Must be a string.</small> -->
	                    <select id="state" name="state">
							<option value="AL">Alabama</option>
							<option value="AK">Alaska</option>
							<option value="AZ">Arizona</option>
							<option value="AR">Arkansas</option>
							<option value="CA">California</option>
							<option value="CO">Colorado</option>
							<option value="CT">Connecticut</option>
							<option value="DE">Delaware</option>
							<option value="DC">District Of Columbia</option>
							<option value="FL">Florida</option>
							<option value="GA">Georgia</option>
							<option value="HI">Hawaii</option>
							<option value="ID">Idaho</option>
							<option value="IL">Illinois</option>
							<option value="IN">Indiana</option>
							<option value="IA">Iowa</option>
							<option value="KS">Kansas</option>
							<option value="KY">Kentucky</option>
							<option value="LA">Louisiana</option>
							<option value="ME">Maine</option>
							<option value="MD">Maryland</option>
							<option value="MA">Massachusetts</option>
							<option value="MI">Michigan</option>
							<option value="MN">Minnesota</option>
							<option value="MS">Mississippi</option>
							<option value="MO">Missouri</option>
							<option value="MT">Montana</option>
							<option value="NE">Nebraska</option>
							<option value="NV">Nevada</option>
							<option value="NH">New Hampshire</option>
							<option value="NJ">New Jersey</option>
							<option value="NM">New Mexico</option>
							<option value="NY">New York</option>
							<option value="NC">North Carolina</option>
							<option value="ND">North Dakota</option>
							<option value="OH">Ohio</option>
							<option value="OK">Oklahoma</option>
							<option value="OR">Oregon</option>
							<option value="PA">Pennsylvania</option>
							<option value="RI">Rhode Island</option>
							<option value="SC">South Carolina</option>
							<option value="SD">South Dakota</option>
							<option value="TN">Tennessee</option>
							<option value="TX">Texas</option>
							<option value="UT">Utah</option>
							<option value="VT">Vermont</option>
							<option value="VA">Virginia</option>
							<option value="WA">Washington</option>
							<option value="WV">West Virginia</option>
							<option value="WI">Wisconsin</option>
							<option value="WY">Wyoming</option>
						</select>
	                  </div>
	                  <div class="small-12 medium-4 large-4 columns">
	                    <label>Zipcode</label>
	                    <input type="text" id="postal_code" name="postal_code" placeholder="" pattern="[0-9]{5}" required/>
	                    <small class="error" data-error-message>Zipcode is required. Five numbers</small>
	                  </div>
	                  
	                  <div class="large-12 columns">
	                    <hr>
	                  </div>
	              </div>

	            </div>

		

		        <div class="row">
	                <div class="small-12 medium-4 large-4 columns">
	                  <label>Phone</label>
	                  <input type="text" id="phone" name="phone" placeholder="" required pattern="^(?:\(\d{3}\)|\d{3})[- ]?\d{3}[- ]?\d{4}$" />
                  <small class="error" data-error-message>Phone is required, format:<br> (xxx)xxx-xxxx or xxx-xxx-xxxx</small>
	                </div>
	               <!--  <div class="small-12 medium-4 large-4 end columns">
	                  <label>Email</label>
	                  <input type="email" id="email" name="email" required placeholder="" />
	                  <small class="error" data-error-message>Email is required with email format.</small>
	                </div> -->
	            </div>

		        <div class="row">
		            <div class="small-12 medium-4 large-4 columns">
			            <label>License</label>
			            <input type="text" id="license" name="license" placeholder="" pattern="([A-Za-z]{1})[0-9]+" required />
			            <small class="error" data-error-message>License is required with one letter and numbers.</small>
		            </div>
		            <div class="small-12 medium-4 large-4 end columns">
			            <label>Preferred Lab</label>
			            <select id="preferred_lab" name="preferred_lab">
							<option value="1">ARUP</option>
							<option value="2">MEDTOX</option>
							<option value="3">PACTOX</option>
							<option value="4">PALI</option>
							<option value="5">QDI-SAC</option>
							<option value="6">QDI-SJC</option>
							<option value="7">QDI-WH</option>
							@foreach($labs as $lab)
								<option value="{{{$lab->id}}}">{{{$lab->name}}}</option>
							@endforeach
						</select>
						<small class="error" data-error-message>Select a laboratory. <br>If is empty, please contact to the admin.</small>
		            </div>
		            <div class="small-12 medium-4 large-4 columns">
		            	<label>Notify OEHHA about my registration</label>
		            	<input type="checkbox" name="oehha" id="oehha-check" />
		            </div>
		        </div>

		        <div class="row">
		        	<div class="small-12 medium-6 large-6 columns">
		        		<p>
		        			<label>
		        				<input type="checkbox" required/>
		        				<small class="error" data-error-message>You have to check the User Agreement.</small>		
		        				User Agreement
		        				<a href="#user_agreement_modal" onclick="userAgreement()">Read</a>
		        			</label>

		        		</p>
		        		@include('registration.userAgreement')
		        	</div>
		        </div>

		        <div class="row">
	                <div class="small-6 medium-6 large-6 columns">
	                  <button class="expand">Save</button>
	                </div>
	                <div class="small-6 medium-6 large-6 end columns">
	                  <a href="{{{ URL::to('/') }}}" class="button expand">Cancel</a>
	                </div>
	            </div>
 
	        <!-- </form> -->

			</div>


      	</form>

    </div>
@stop