<h3 class="text-center"><i class="fa fa-magic"></i>  Job Request</h3>


<div class="installer-container">
  <wizard on-finish="finishedWizard()" current-step="currentRequestStep" name="RequestWizard" hide-indicators="true">

    <wz-step class="fx-fade-right" wz-title="File Info" >
      <h4 class="bg-primary">1 - File Information</h4>
      <form class="form-horizontal" role="form" name="fileInfoForm" novalidate>
        <file-info-form ng-model="request" form-name="fileInfoForm"></file-info-form>
      </form>
      <button class="btn btn-primary btn-next pull-right" type="button" wz-next ng-disabled="fileInfoForm.$invalid">Next</button>
      <!-- <button class="btn btn-primary btn-next pull-right" type="button" ng-disabled="fileInfoForm.$invalid" wz-next >Next</button> -->
    </wz-step>

    <wz-step class="fx-fade-right" wz-title="Rooms">
      <h4 class="bg-primary">2 - Rooms</h4>
      <form name="newRoomForm" novalidate>
        <add-rooms ng-model="request" model-types="availableModels"></add-rooms>
      </form>
      <button class="btn btn-primary btn-previous pull-left" type="button" wz-previous>Back</button>
      <button class="btn btn-primary btn-next pull-right" type="button" wz-next ng-disabled="newRoomForm.$invalid">Next</button>
    </wz-step>

    <wz-step class="fx-fade-right" wz-title="Devices">
      <a wz-next>Skip to Activities phase</a>

      <wizard on-finish="showAddDeviceModal()" current-step="currentDeviceStep" name="DeviceWizard" hide-indicators="true">
        <wz-step class="fx-fade-right" wz-title="Device Info" >
          <h4 class="bg-primary">3 - Devices (General Information)</h4>
          <form class="form-horizontal" role="form" name="deviceInfoForm" novalidate>
            <device-info-form ng-model="device" form-name="deviceInfoForm" selected-room="selection.room" rooms="request.rooms" device-types="deviceTypes"></device-info-form>
          </form>
          <button class="btn btn-primary btn-previous pull-left" type="button" ng-click="initDevice(); goTo('RequestWizard', 1)">Back</button>
          <!-- <button class="btn btn-primary btn-next pull-right" type="button" ng-show="device.db.source === 'DB'" ng-click="goTo('DeviceWizard', 1)" >Next</button> -->
          <button class="btn btn-primary btn-next pull-right" type="button" ng-show="device.db.source === 'DB'" ng-disabled="deviceInfoForm.$invalid" click-and-disable="fetchBrands(device.db.type)" >Next</button>
          <button class="btn btn-primary btn-next pull-right" type="button" ng-show="device.db.source === 'CUSTOM'" ng-disabled="deviceInfoForm.$invalid" ng-click="goTo('DeviceWizard', 2)" >Next</button>
        </wz-step>

        <wz-step class="fx-fade-right" wz-title="DB">
          <h4 class="bg-primary">3 - Devices (Database)</h4>
          <form class="form-horizontal" role="form" name="dbDeviceForm" novalidate>
            <db-device-form ng-model="device" brands="brands" categories="categories"></db-device-form>
          </form>
          <button class="btn btn-primary btn-previous pull-left" type="button" ng-click="goTo('DeviceWizard', 0)">Back</button>
          <button class="btn btn-primary btn-next pull-right" type="button" click-and-disable="fetchDeviceInfo(device)" ng-disabled="dbDeviceForm.$invalid || !device.db.model.id">Next</button>
          <!-- <button class="btn btn-primary btn-next pull-right" type="button" ng-click="goTo('DeviceWizard', 3)">Next</button> -->

        </wz-step>

        <wz-step class="fx-fade-right" wz-title="CUSTOM">
          <h4 class="bg-primary">3 - Devices (Write-In Request)</h4>
          <form class="form-horizontal" role="form" name="customDeviceForm" novalidate>
            <custom-device-form ng-model="device"></custom-device-form>
          </form>
          <button class="btn btn-primary btn-previous pull-left" type="button" ng-click="goTo('DeviceWizard', 0)">Back</button>
          <button class="btn btn-primary btn-next pull-right" type="button" ng-click="goTo('DeviceWizard', 3)" ng-disabled="customDeviceForm.$invalid">Next</button>
        </wz-step>

        <wz-step class="fx-fade-right" wz-title="Device Settings">
          <h4 class="bg-primary">3 - Devices (Settings)</h4>
          <form role="form" name="deviceSettingsForm" novalidate>
            <device-settings-form ng-model="device" form-name="deviceSettingsForm" room="selection.room" info="deviceInfo"></device-settings-form>
          </form>
          <button class="btn btn-primary btn-previous pull-left" type="button" ng-show="device.db.source === 'DB'" ng-click="goTo('DeviceWizard', 1)">Back</button>
          <button class="btn btn-primary btn-previous pull-left" type="button" ng-show="device.db.source === 'CUSTOM'" ng-click="goTo('DeviceWizard', 2)">Back</button>

          <button class="btn btn-primary pull-right" type="button" ng-hide="isEntDevice(device.db.type)" wz-finish >Finish</button>
          <button class="btn btn-primary btn-next pull-right" type="button" ng-show="isEntDevice(device.db.type)" wz-next >Next</button>
        </wz-step>

        <wz-step class="fx-fade-right" wz-title="Favorite Channels">
          <h4 class="bg-primary">3 - Devices (Favorite Channels)</h4>
          <p> Would you like to add Favorite Channels to this device? This will add the option to open a customizable list of channels and guide information to this device when using the remote control. </p>
          <form role="form" name="favChannelsForm" novalidate>
            <fav-channels-form ng-model="device" formName="favChannelsForm"></fav-channels-form>
          </form>
          <button class="btn btn-primary btn-previous pull-left" type="button" wz-previous>Back</button>
          <button class="btn btn-primary pull-right" type="button" wz-finish >Finish</button>
        </wz-step>
      </wizard>

      <!-- <button class="btn btn-primary btn-previous pull-left" type="button" wz-previous>Back</button>
      <button class="btn btn-primary btn-next pull-right" type="button" wz-next >Next</button> -->
    </wz-step>


    <wz-step class="fx-fade-right" wz-title="Activity Devices">
      <h4 class="bg-primary">4 - Activities (Select Devices)</h4>
      <p>Simple activities may be setup for each device. This will provide the user with a helpful list of relevant power and input commands used to setup the activity.</p>
      <p>Select the devices which will have activities.</p>
      <select-activity-devices ng-model="request.rooms"></select-activity-devices>
      <button class="btn btn-primary btn-previous pull-left" type="button" wz-previous>Back</button>
      <button class="btn btn-primary btn-next pull-right" type="button" wz-next >Next</button>
    </wz-step>

    <wz-step class="fx-fade-right" wz-title="Activity Commands">
      <h4 class="bg-primary">4 - Activities (Select Commands)</h4>
      <p>For each device-based activity, you must select which devices are involved, requiring the user to operate Power and/or Input commands.</p>
      <select-activity-cmds ng-model="request.rooms"></select-activity-cmds>
      <button class="btn btn-primary btn-previous pull-left" type="button" wz-previous>Back</button>
      <button class="btn btn-primary btn-next pull-right" type="button" wz-next >Next</button>
    </wz-step>

    <wz-step class="fx-fade-right" wz-title="Volume Punch Through">
      <h4 class="bg-primary">5 - Volume "Punch Through"</h4>
      <p>Each device selected on the remote for control will normally send out volume commands to the associated device. Sometimes it is more convenient to have a device send out another device's volume commands, such as sending the Speaker Bar's volume command while using the Blu-Ray device. We call this option &ldquo;Volume Punch Through&rdquo; and it may be setup as many devices as you like.</p>
      <p>Start by selecting a device which will use another device's volume commands.</p>
      <vol-punch-through ng-model="request.rooms"></vol-punch-through>
      <button class="btn btn-primary btn-previous pull-left" type="button" wz-previous>Back</button>
      <button class="btn btn-primary btn-next pull-right" type="button" wz-next >Next</button>
    </wz-step>

    <wz-step class="fx-fade-right" wz-title="Overview">
      <h4 class="bg-primary">6 - Review your request and submit</h4>
      <p>Carefully review the request. Once the job request is submitted, it is final and cannot be edit here.</p>
      <request-overview ng-model="request.rooms" model-types="availableModels"> </request-overview>
      <button class="btn btn-primary btn-previous pull-left" type="button" wz-previous>Back</button>
      <button class="btn btn-success pull-right" type="button" wz-finish>Submit</button>
    </wz-step>



  </wizard>

</div>
