<div ng-if="!length_events">
  <div class="col-xs-12">
    Aucun événement associé
  </div>
</div>
<div ng-if="length_events">
  <div class="col-xs-12 representation_filiere toolbar btn">
    <div class="pull-right">
      <button type="button" ng-click="addNewEvent()" class="btn btn-success" ng-if="openControleAcceptsRDV">
        Ajouter
      </button>
      <button type="button" ng-click="refresh()" class="btn btn-default">
        <span class="glyphicon glyphicon-refresh"></span>
      </button>
    </div>
  </div>
  <div
      class="col-xs-12 report_evenment_table"
      ng-class="{ 'disabled ' : disabled }"
  >
    <table class="table table-striped table-bordered">
      <tr>
        <th>Agent</th>
        <th>Titre</th>
        <th>Type de controle</th>
        <th class="order_button">
          <div ng-click="order('properties.start')">
            Date
            <span
                class="sortorder"
                ng-show="predicate === 'properties.start'"
                ng-class="{reverse:reverse}"
            ></span>
          </div>
        </th>
        <th class="order_button">
          <div ng-click="order('properties.end')">
            Heure
            <span
                class="sortorder"
                ng-show="predicate === 'properties.end'"
                ng-class="{reverse:reverse}"
            ></span>
          </div>
        </th>
        <th>Statut</th>
        <th>Origine du report/annulation</th>
        <th>Description</th>
        <th>Éditer</th>
      </tr>
      <tbody ng-repeat="control in currentRDVControles.slice().reverse() track by $index">
      <tr >
        <th colspan="9"
            ng-class="{'controlInactif': control.properties.etat == 'clos' }"
            ng-click="expanded[$index] = !expanded[$index]"
        >
          <span ng-class="{'glyphicon fa icon-minus glyphicon-minus fa-minus':expanded[$index]}" ng-if="control.eventsRDV.length > 0"></span>
          <span ng-class="{'glyphicon fa icon-plus glyphicon-plus fa-plus':!expanded[$index]}" ng-if="control.eventsRDV.length > 0"></span>
          &nbsp;{{control.ctrlLabel }}
        </th>
      </tr>

      <tr ng-repeat="event in control.eventsRDV.slice().reverse() track by $index" ng-if="expanded[$parent.$index]" ng-if="control.eventsRDV.length > 0">
        <td>
          <span>{{event.properties.agentRDV.name}} {{event.properties.agentRDV.surname}} ({{event.properties.agentRDV.login}})</span>

        </td>
        <td>
          <span ng-show="!editEventLine[$index]">{{event.properties.title}}</span>
          <div>
            <input type="text"
                   ng-model="event.properties.title"
                   ng-show="editEventLine[$index]"
                   class="form-control"/>
          </div>
        </td>
        <td>
          <span ng-show="!editEventLine[$index]">{{control.properties.type}}</span>
          <div ng-show="editEventLine[$index]">
            <select class="form-control"
                    ng-init="event.properties.type"
                    ng-model="event.properties.type"
                    ng-options="type for type in controlTypes">
            </select>
          </div>
        </td>

        <td class="{{event.properties.alertClass}}">
          <span ng-show="!editEventLine[$index]">{{renderValue(event.properties.start)}}</span>
          <div class="pull-right isSuffix" ng-show="editEventLine[$index]">
            <input type="text"
                   class="form-control"
                   ng-model="event.properties.start"
                   data-date-format="dd-MM-yyyy"
                   model-date-format="yyyy-MM-ddTHH:mm:ss.sssZ"
                   data-min-date="{{dateMin}}"
                   data-max-date="{{dateMax}}"
                   data-autoclose="true"
                   placeholder="Date Fin"
                   bs-datepicker/>
          </div>
        </td>
        <td>
          <span ng-show="!editEventLine[$index]">{{renderTimeFromDate(event.properties.start)}}</span>
          <div class="pull-right isSuffix" ng-show="editEventLine[$index]">
            <input type="text"
                   class="form-control"
                   ng-model="event.properties.start"
                   data-time-format="HH:mm"
                   model-time-format="yyyy-MM-ddTHH:mm:ss.sssZ"
                   time-type="string"
                   data-autoclose="1"
                   placeholder="{{renderTimeFromDate(event.properties.start)}}"
                   bs-timepicker/>
          </div>
        </td>
        <td>
          <span class="text-capitalize" ng-show="!editEventLine[$index]">{{event.properties.statutRDV}}</span>
          <div ng-show="editEventLine[$index]">
            <select class="form-control text-capitalize"
                    ng-init="event.properties.status"
                    ng-model="event.properties.status"
                    ng-options="status for status in statusList">
            </select>
          </div>
        </td>
        <td>{{event.properties.origine_du_report_annulation}}</td>
        <td>{{event.properties.comment}}</td>
        <td class="text-center">
          <div class="btn btn-success btn-sm"
               ng-click="updateEventType($index)"
               ng-show="editEventLine[$index]"
               ng-disabled="validUpdateType(type)||type.properties.type==''">
            <i class="fa fa-check"></i>
          </div>
          <div class="btn btn-default btn-sm"
               ng-click="cancelEventEdit($index)"
               ng-show="editEventLine[$index]">
            <i class="fa fa-eraser"></i>
          </div>
          <div ng-if="appType == 'anc'" class="btn btn-default btn-sm"
               ng-click="actionPriseRdv()"
               ng-show="!editEventLine[$index]"
               ng-disabled="control.properties.etat == 'clos'"
          >
            <i class="fa fa-edit"></i>
          </div>
          <div class="btn btn-default btn-sm"
               ng-click="removeEvent(event, control.id)"
               ng-show="!editEventLine[$index]"
               ng-disabled="control.properties.etat == 'clos'"
          >
            <i class="fa fa-remove"></i>
          </div>
        </td>
      </tr>
      </tbody>
    </table>

  </div>
</div>
