@extends('master')

<script type="text/javascript">
  /*function showContent() {
        element = document.getElementById("address");
        check = document.getElementById("checkAddress");
        if (check.checked) {
            element.style.display='none';
        }
        else {
            element.style.display='block';
        }
    }*/

function showContent(){

  $('#checkAddress').change(function(){

     if(this.checked){
        
        $('#address').hide();
        $('#proxyAddress').show();

        document.getElementById("address1").value = 'N/A';
        document.getElementById("address2").value = 'N/A';
        document.getElementById("city").value = 'N/A';
        document.getElementById("state").value = 'N/A';
        document.getElementById("postal_code").value = '00000';

     }else{
        
        $('#address').show();
        $('#proxyAddress').hide();

        document.getElementById("address1").value = '';
        document.getElementById("address2").value = '';
        document.getElementById("city").value = '';
        document.getElementById("state").value = '';
        document.getElementById("postal_code").value = '';

     }
     
  });
}

function proxyAddress(){
  $('#checkProxy').change(function(){

    if(this.checked){
      $('#proxy').show();
      document.getElementById("address1").value = '';
      document.getElementById("address2").value = '';
      document.getElementById("city").value = '';
      document.getElementById("state").value = '';
      document.getElementById("postal_code").value = '';
      //$('#address').show();
    }else{
      $('#proxy').hide();
      document.getElementById("address1").value = 'N/A';
      document.getElementById("address2").value = 'N/A';
      document.getElementById("city").value = 'N/A';
      document.getElementById("state").value = 'N/A';
      document.getElementById("postal_code").value = '00000';
    }

  });
  
}

  
</script>


<!-- <link href="{{{URL::to("//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css")}}}" rel="stylesheet"> -->
<link href="{{{URL::to("//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css")}}}" rel="stylesheet">
<link rel="stylesheet" href="{{{ URL::to('lib/foundation/css/foundation-datepicker.css') }}}" />



@section('content')

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

        <div class="large-12 columns">
            <div class="row">
                <div class="small-12 medium-12 large-12 columns">
                    <h4>Patient Registration</h4>
                </div>
            </div>

            <div class="row">
                <div class="small-12 medium-12 large-12 columns">
                    <p>Manual entry of new patient data – form will not be saved until all required data fields are completed. </p>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
      <div class="small-12 medium-6 large-6 columns">
        <h4>Patient Information</h4>
      </div>
    </div>

    <div class="row">
       <form action="{{{ URL::to('patients') }}}" method="post" data-abide>
        <div class="small-12 medium-12 large-12  columns">
            

            <div class="row">
                <div class="small-12 medium-6 large-6 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 not have blanks.</small>
                </div>
                <div class="small-6 medium-3 large-3 columns end ">
                  <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 not have blanks.</small>
                </div>
            </div>
            <div class="row">
                <div class="small-12 medium-9 large-9 columns end">
                  <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 not have blanks.</small>
                </div>
            </div>

            <div class="row">
              <div class="small-12 medium-3 large-3 columns">
                <div class="row collapse date" id="dp3" data-date-format="yyyy-mm-dd">
                  <label>DOB</label>
                  <div class="small-9 columns">
                    <input type="text" id="DOB" name="DOB" placeholder="" pattern="date" required />
                    <small class="error" data-error-message>Date format: yyyy-mm-dd.</small>
                  </div>
                  <div class="small-3 columns">
                    <span class="postfix"><i class="fa fa-calendar"></i></span>
                  </div>
                </div>
              </div> 
              <div class="small-12 medium-6 large-6 columns end ">
                <label>Sex</label>
                <select id="sex" name="sex">
                  <option value="Male">Male</option>
                  <option value="Female">Female</option>                  
                </select>
              </div>

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

            <div class="row">
               <div class="small-12 medium-4 large-5 columns">
                <label>Phone (Cellular)</label>
                <input type="text" id="phone_cell" name="phone_cell" placeholder="" pattern="^(?:\(\d{3}\)|\d{3})[- ]?\d{3}[- ]?\d{4}$" />
                <small class="error" data-error-message>Phone format:<br> (xxx)xxx-xxxx or xxx-xxx-xxxx</small>
              </div>

              <div class="small-12 medium-4 large-4 end columns">
                <label>Fax</label>
                <input type="text" id="employee_fax" name="employee_fax" placeholder="" pattern="^(?:\(\d{3}\)|\d{3})[- ]?\d{3}[- ]?\d{4}$" />
                <small class="error" data-error-message>Phone format:<br> (xxx)xxx-xxxx or xxx-xxx-xxxx</small>
              </div>
            </div> 
            <hr>
            <div class="row">
                <div class="large-12 columns">
                  <h4>Address</h4> 
                  <label>N/A</label>
                  <input type="checkbox" id="checkAddress" name="checkAddress" onchange="javascript:showContent();"/>                  
                </div>
            </div>
            <div class="row">
                <div id="proxyAddress" style="display:none;" class="large-12 columns">
                  <label>Proxy address</label>
                  <input type="checkbox" id="checkProxy" name="proxy_address" value="1" onchange="javascript:proxyAddress();"/>                  
                </div>
            </div>

            <div id="proxy" style="display:none;">

              <div class="row">
                <div class="small-12 medium-9 large-9 columns">
                  <label>Address 1</label>
                  <strong>{{{$provider->street}}}</strong>
                </div>
              </div>
              <div class="row">
                <div class="small-12 medium-9 large-9 columns">
                  <label>Address 2</label>
                 <strong>{{{$provider->streetb}}}</strong>
                </div>
              </div>
               <div class="row">
                <div class="small-12 medium-9 large-9 columns">
                  <label>City</label>
                 <strong>{{{$provider->city}}}</strong>
                </div>
              </div>
              <div class="row">
                <div class="small-12 medium-5 large-5 columns">
                    <label>State</label>
                    <strong>{{{$provider->state}}}</strong>
                </div>
                <div class="small-12 medium-4 large-4 columns end">
                    <label>Zipcode</label>
                    <strong>{{{$provider->zip}}}</strong>
                  </div>  
              </div>
                



            </div>

            <div id="address">
              <div class="row">
                  <div class="small-12 medium-9 large-9 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-9 large-9 columns">
                  <label>Address 2</label>
                  <input type="text" id="address2" name="address2" placeholder=""  />
                  <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-9 large-9 columns">
                    <label>City</label>
                    <input type="text" id="city" name="city" placeholder="" required />
                    <small class="error" data-error-message>Must be a string.</small>
                  </div>
                </div>
                <div class="row">
                  <div class="small-12 medium-5 large-5 columns">
                    <label>State</label>
                    <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>
                      <option value="N/A">N/A</option>
                    </select>
                  </div>
                  <div class="small-12 medium-4 large-4 columns end">
                    <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 digits</small>
                  </div>                  
              </div>

            </div>

            <hr>
            <div class="row">
              <div class="small-12 large-12 columns">
                <div class="row">
                  <div class="small-12 large-12 columns">
                    <h4>Patient Notification Preferences</h4>
                  </div>
                </div>

                <div class="row">

                  <div class="small-12 large-4 columns">
                    <label>E-mail <input type="radio" name="notification_preferences" value="email" /></label>
                  </div>
                   <div class="small-12 large-4 columns">
                    <label>Fax <input type="radio" name="notification_preferences" value="fax" /></label>
                  </div>
                   <div class="small-12 large-4 columns">
                    <label>Mail <input type="radio" name="notification_preferences" value="mail" /></label>
                  </div>

                </div>   

                <div class="row">
                  <div class="small-12 large-4 end columns">
                    <label>Preferred Language</label>
                    <select id="employee_language" name="employee_language">
                      <option value="English"  >English</option>
                      <option value="Spanish"  >Spanish</option>
                    </select>
                  </div>
                </div>

              </div>
            </div>


            <hr/>
            <div class="row">
                <div class="large-12 columns">
                    <div class="row">
                      <div class="large-12 columns">
                        <h4>Contact Information</h4>
                      </div>
                    </div>
                    
                </div>
            </div>
            
            <div class="row">
                <div class="small-12 medium-9 large-9 columns">
                  <label>Contact Name</label>
                  <input type="text" id="name_contact" name="name_contact" placeholder="" required />
                  <small class="error" data-error-message>Contact is required</small>
                </div>
                <div class="small-12 medium-4 large-4 columns">
                  <label>Contact Email</label>
                  <input type="email" id="email_contact" name="email_contact" required placeholder="" />
                  <small class="error" data-error-message>Contact Email is required with email format.</small>
                </div>
                <div class="small-12 medium-4 large-4 end columns">
                  <label>Contact Phone</label>
                  <input type="text" id="contact_phone" name="phone_contact" placeholder="" required pattern="^(?:\(\d{3}\)|\d{3})[- ]?\d{3}[- ]?\d{4}$" />
                  <small class="error" data-error-message>Contact 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>Fax</label>
                  <input type="text" id="fax" name="fax" placeholder="" pattern="^(?:\(\d{3}\)|\d{3})[- ]?\d{3}[- ]?\d{4}$" />
                  <small class="error" data-error-message>Phone format:<br> (xxx)xxx-xxxx or xxx-xxx-xxxx</small>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="large-12 columns">
                  <h4>Employer</h4>
                    <div class="row">
                      <div class="small-12 medium-9 large-9 end columns">
                        <label>Name</label>
                        <input type="text" id="employer" name="employer" placeholder="" required />
                        <small class="error" data-error-message>Employer Name is required</small>
                      </div>
                    </div>

                    <div class="row">
                          <div class="small-12 medium-9 large-9 columns">
                            <label>Address1</label>
                            <input type="text" id="employer_address" name="employer_address" 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-9 large-9 columns">
                            <label>Address2</label>
                            <input type="text" id="employer_address2" name="employer_address2" placeholder=""  />
                            <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-9 large-9 columns">
                            <label>City</label>
                            <input type="text" id="employer_city" name="employer_city" placeholder="" required />
                            <small class="error" data-error-message>Must be a string.</small>
                          </div>
                        </div>
                        <div class="row">
                          <div class="small-12 medium-5 large-5 columns">
                            <label>State</label>
                            <!-- <input type="text" id="employer_state" name="employer_state" placeholder="" required/>
                            <small class="error" data-error-message>Must be a string.</small> -->
                            <select id="employer_state" name="employer_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 end columns">
                            <label>Zipcode</label>
                            <input type="text" id="employer_postal_code" name="employer_postal_code" placeholder="" required/>
                            <small class="error" data-error-message>Zipcode is required.</small>
                          </div>
                          
                      </div>
                      <div class="row">
                        <div class="small-12 medium-4 large-5 columns">
                          <label>Email</label>
                          <input type="email" id="employer_email" name="employer_email" required placeholder="" />
                          <small class="error" data-error-message>Invalid email format.</small>
                      
                        </div>
                        <div class="small-12 medium-4 large-4 end columns">
                          <label>Phone (Home)</label>
                          <input type="text" id="employer_phone_home" name="employer_phone_home" placeholder="" pattern="^(?:\(\d{3}\)|\d{3})[- ]?\d{3}[- ]?\d{4}$" />
                          <small class="error" data-error-message>Phone format:<br> (xxx)xxx-xxxx or xxx-xxx-xxxx</small>
                        </div>
                      </div>

                      <div class="row">
                         <div class="small-12 medium-4 large-5 columns">
                          <label>Phone (Cellular)</label>
                          <input type="text" id="employer_phone_cell" name="employer_phone_cell" placeholder="" pattern="^(?:\(\d{3}\)|\d{3})[- ]?\d{3}[- ]?\d{4}$" />
                          <small class="error" data-error-message>Phone format:<br> (xxx)xxx-xxxx or xxx-xxx-xxxx</small>
                        </div>

                        <div class="small-12 medium-4 large-4 end columns">
                          <label>Fax</label>
                          <input type="text" id="employer_fax" name="employer_fax" placeholder="" pattern="^(?:\(\d{3}\)|\d{3})[- ]?\d{3}[- ]?\d{4}$" />
                          <small class="error" data-error-message>Phone format:<br> (xxx)xxx-xxxx or xxx-xxx-xxxx</small>
                        </div>
                      </div> 

                      <div class="row">
                        <div class="small-12 medium-9 large-9 end columns">
                          <label>Occupation / Company</label>
                            <input type="text" id="employer_occupation" name="employer_occupation" placeholder="" required />
                            <small class="error" data-error-message>Ocupation / Company is required.</small>
                        </div>
                        <div class="large-12 columns">
                            <hr>
                        </div>
                      </div>
                </div>
                <div class="row">
                  <div class="small-12 large-12 columns">
                    <h4>Employer Notification Preferences</h4>
                  </div>
                </div>

                <div class="row">

                 <div class="small-12 large-4 columns">
                   <label>E-mail <input type="radio" name="emp_notification_preferences" value="email" /></label>
                 </div>
                 <div class="small-12 large-4 columns">
                   <label>Fax <input type="radio" name="emp_notification_preferences" value="fax" /></label>
                 </div>
                 <div class="small-12 large-4 columns">
                   <label>Text <input type="radio" name="emp_notification_preferences" value="sms" /></label>
                 </div>

                </div>   

                <div class="row">
                  <div class="small-12 large-4 end columns">
                    <label>Preferred Language</label>
                    <select id="employee_language" name="preferred_language">
                      <option value="English"  >English</option>
                      <option value="Spanish"  >Spanish</option>
                    </select>
                  </div>
                </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('patients/') }}}" class="button expand">Cancel</a>
              </div>
          </div>

          <!-- </form> -->
        </div>

        </form>

    </div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="{{{URL::to('lib/foundation/js/foundation-datepicker.js')}}}"></script>


    <script>

      (function($) {
         
         $('.date').fdatepicker();
         
      })(jQuery);
    </script>

@stop