<h3>Enrolling in {{memInfo.returnData.item_name}}({{memInfo.returnData.item_code}})</h3>

<h4>Please select the household members that will be enrolling in this membership:</h4>

<form name="memForm" class="form-horizontal" role="form" ng-submit="submitMembershipForm()">
  <ng-form name="memForm">

    <div class="panel panel-default">
      <div class="panel-heading">
        <label>Household Members</label>
        <span class="pull-right hidden-xs" data-ng-show='memInfo.showLoadingRegistration'>Checking Requirements... <i class="fa fa-cog fa-spin"></i></span>
      </div>
      <div class="panel-body">
        <div class="row">
          <div class="col-sm-3">
            <p>Name</p>
          </div>
          <div class="col-sm-1">
            <p>Age</p>
          </div>
          <div class="col-sm-2">
            <p>Contact Type</p>
          </div>
          <div class="col-sm-2">
            <p>Cost</p>
          </div>
        </div>

        <div class="form-group" data-ng-repeat="person in memReg.household">
          <div class="col-sm-3">
            <checkbox id="select_{{person.user_id}}" class="btn-{{(person.members_selected)?'success':'primary'}}" data-ng-model="person.members_selected" data-ng-change="calculateFee()"></checkbox>
            <label for="select_{{person.user_id}}" class="clickylabel">{{person.firstname}} {{person.lastname}}</label>
          </div>
          <div class="col-sm-1">
            <label for="select_{{person.user_id}}" class="clickylabel">{{person.age}}</label>
          </div>
          <div class="col-sm-2">
            <label for="select_{{person.user_id}}" class="clickylabel" data-ng-show="{{person.primary_contact === '1'}}">Primary</label>
            <label for="select_{{person.user_id}}" class="clickylabel" data-ng-show="{{person.secondary_contact === '1'}}">Secondary</label>
          </div>
          <div class="col-sm-2">
            <label for="select_{{person.user_id}}" class="clickylabel" data-ng-show="memReg.household[$index].members_selected">
              ${{memReg.household[$index].fees[0].feeAmount}}
            </label>
          </div>
        </div>
      </div>
    </div>

    <div class="panel panel-default" data-ng-show="customFieldInfo.returnData.customForm.length > 0">
      <div class="panel-heading">
        <label>Additional Information</label>
      </div>
      <div class="panel-body">
        <div ng-repeat="field in customFieldInfo.returnData.customForm">
          <!-- TEXT FIELDS -->
          <div ng-if="field.type=='text'" class="form-group">
            <label class="col-sm-3 control-label-center">{{field.label}}</label>
            <div class="col-sm-6">
              <input type="{{field.type}}" id="{{field.id}}" data-ng-model="field.response_value" class="form-control" required/>
            </div>
          </div>

          <!-- NUMERIC FIELDS -->
          <div ng-if="field.type=='number'" class="form-group">
            <label class="col-sm-3 control-label-center">{{field.label}}</label>
            <div class="col-sm-6">
              <input type="text" id="{{field.name}}" data-ng-model="field.response_value"  class="form-control" required/>
            </div>
          </div>

          <!-- SELECT FIELDS -->
          <div ng-if="field.type=='select'" class="form-group" >
            <label class="col-sm-3 control-label-center">{{field.label}}</label>
            <div class="col-sm-6">
              <select data-ng-model="field.response_value" class="form-control" prompt="Select One" required>
                <option data-ng-repeat="option in field.options">{{option}}</option>
              </select>
            </div>
          </div>

          <!-- CHECKBOX FIELDS -->
          <div ng-if="field.type=='checkbox'" class="form-group" >
            <label class="col-sm-3" for="field_{{field.field_id}}">{{field.label}}</label>
            <div class="col-sm-6">
              <!--<input type="checkbox" data-ng-if="person.customForm[$index].required" data-ng-model="person.customForm[$index].response_value"  name="taskGroup" id="{{field.name}}" value="{{field.id}}" required/>
              <input type="checkbox" data-ng-if="!person.customForm[$index].required" data-ng-model="person.customForm[$index].response_value"  name="taskGroup" id="{{field.name}}" value="{{field.id}}"/>
              --><checkbox id="field_{{field.field_id}}" class="btn-primary" data-ng-if="field.required" data-ng-model="field.response_value" required></checkbox>
              <checkbox id="field_{{field.field_id}}" class="btn-primary" data-ng-if="!field.required" data-ng-model="field.response_value"></checkbox>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="panel panel-default" data-ng-show="memInfo.returnData.waivers.data.length > 0">
      <div class="panel-heading">
        <label>Waiver(s)</label>
      </div>
      <div class="panel-body">
        <div class="panel panel-primary" data-ng-repeat="waiverData in memInfo.returnData.waivers.data">
          <div class="panel-heading  clearfix">
          {{waiverData.waiver_name}}
          </div>

          <div class="panel-body">
            <div name="txtWaiver" id="txtWaiver" class="well scrollbox" data-ng-enable="false" data-ng-bind-html="waiverData.waiver_text" rows="3"></div>

            <div class="form-group" >
              <div class="col-sm-6">
                <checkbox id="waiverData.waiver_id" class="btn-primary" data-ng-model="waiverData.agreed" name="waiverData.waiver_name" required></checkbox>
                I agree to the terms outlined in the above waiver.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-heading">
        <label>Summary</label>
      </div>
      <div class="panel-body">
        <div class="form-group" data-ng-show="memInfo.totalMembershipFee > 0">
          <div class="col-sm-12">
            <h4>Total membership cost: ${{memInfo.totalMembershipFee}}</h4>
          </div>
        </div>

        <div class="form-group" data-ng-show="memInfo.returnData.allow_payment_plans === '1' && memInfo.totalMembershipFee > 0">
          <div class="col-sm-12">
            <p>This membership allows payments to be split up evenly by {{memInfo.returnData.num_of_payments}} payments of ${{(memInfo.totalMembershipFee/memInfo.returnData.num_of_payments).toFixed(2)}}.</p>
          </div>
          <div class="col-sm-12">
            <checkbox id="memFormUsePlan" class="btn-{{(person.members_selected)?'success':'primary'}}" data-ng-model="memForm.use_payment_plan" data-ng-change="calculatePaymentFee()"></checkbox>
            <label for="memFormUsePlan" class="clickylabel">Use Payment Plan</label>
          </div>
        </div>

        <div class="form-group" data-ng-show="memInfo.totalMembershipFee > 0">
          <div class="col-sm-12">
            <h4>Total charged today: ${{memInfo.toPayToday}}</h4>
          </div>
        </div>

        <div class="form-group">
          <div class="col-sm-6" data-ng-show="!memInfo.submittingCart">
            <button type="submit" id="submitFinal" value="Submit" class="btn btn-success" data-ng-enable="memForm.$valid"><i class="fa fa-plus"></i> <i class="fa fa-shopping-cart"></i> Add to Cart</button>
          </div>
          <div class="col-sm-6" data-ng-show="memInfo.submittingCart">
            Adding item to cart...
          </div>
        </div>
      </div>
    </div>
  </ng-form>
</form>