eHealthAfrica/direct-delivery-dashboard

<div class="panel panel-default">
  <div class="panel-heading">
    <div class="row">
      <div class="col-sm-12">
        <div class="form-group">

          <div class="row">
            <div class="col-md-2">

              <label>
                <span ng-if="!packingRepCtrl.filterType">Filter By Round</span>
                <span ng-if="packingRepCtrl.filterType">Filter By Date</span>
              </label>
              <div>
                <label class="switch">
                  <input ng-model="packingRepCtrl.filterType" type="checkbox">
                  <i></i>
                </label>
              </div>

            </div>
            <div class="col-md-10">
              <div class="row" ng-if="!packingRepCtrl.filterType">
                <div class="col-md-3">
                  <label for="fromDate">Start</label>

                  <div class="input-group">
                    <input id="fromDate" type="text" class="form-control input-lg"
                           ng-model="packingRepCtrl.startFrom"
                           datepicker-popup="{{packingRepCtrl.dateFormat}}"
                           max-date="packingRepCtrl.stopOn"
                           is-open="packingRepCtrl.start.opened"/>
                    <span class="input-group-btn">
                      <button type="button" class="btn btn-default btn-lg"
                              ng-click="packingRepCtrl.start.open($event)">
                        <i class="fa fa-calendar"></i>
                      </button>
                    </span>
                  </div>
                </div>
                <div class="col-md-3">
                  <label for="fromDate">End</label>
                  <div class="input-group">
                    <input type="text" class="form-control input-lg"
                           ng-model="packingRepCtrl.stopOn"
                           min-date="packingRepCtrl.startFrom"
                           datepicker-popup="{{packingRepCtrl.dateFormat}}"
                           is-open="packingRepCtrl.stop.opened"/>
                    <span class="input-group-btn">
                      <button type="button" class="btn btn-default btn-lg"
                              ng-click="packingRepCtrl.stop.open($event)">
                        <i class="fa fa-calendar"></i>
                      </button>
                    </span>
                  </div>
                </div>
                <div class="col-md-3">
                  <label></label>
                  <div class="input-group">
                    <button class="btn btn-primary btn-lg" type="button"
                            ng-click="packingRepCtrl.getReport()">
                      <i class="fa fa-search"></i>
                      <span>Search</span>
                    </button>
                  </div>
                </div>
              </div>
              <div class="row" ng-if="packingRepCtrl.filterType">
                <div class="col-md-6">
                  <eha-round-search
                    ng-model="packingRepCtrl.selectedRound"
                    rounds="packingRepCtrl.roundCodes"
                    on-select="packingRepCtrl.updateReport"
                    is-loading="packingRepCtrl.isLoading"
                  ></eha-round-search>
                </div>
              </div>
            </div>
          </div>

        </div>
        <!-- end of date range selector -->
      </div>
    </div>

    <div class="panel-body" id="report">
      <div ng-include="'app/reports/packing/partials/table/table.html'"></div>
    </div>
  </div>
</div>