<div class="row itv-unit-container">
  <div class="itv" bs-active-pane="tabs.activeTab" ng-model="tabs.activeTab" bs-tabs>
    <div
      ng-repeat="tab in tabs"
      title="{{ tab.title }}"
      ng-disabled="tab.disabled"
      disabled="{{tab.disabled}}"
      class="itv-unit-tab"
      bs-pane
    ></div>
  </div>

  <!--------------------------------------------->
  <!-- ONGLET Import de l'ITV / choix de l'ITV -->
  <!--------------------------------------------->
  <div style="height:550px" ng-show="tabs.activeTab == 0">
    <div class="itv_ds_network">
      <i>{{'itv.soumission.datastore' | translate}} : </i><b>{{ conf.config.datastore }}</b>
      <i>{{'itv.soumission.network' | translate}} : </i><b>{{ conf.config.network }}</b>
    </div>
    <!-- Choix de l'ITV -->
    <div
      class="row pending-itv-container"
      ng-hide="featureToOpenWith"
      ng-class="{'empty': !itvxmltxtfileName || itvxmltxtfileName.length === 0}"
    >
      <div class="col-xs-12 pending-itv">
          <select
            class="form-control attente-input"
            ng-disabled="conf.config.datastore == null"
            ng-model="itvxmltxtfileName"
            ng-options="net for net in listInspection"
            placeholder="{{ 'itv.soumission.xmltxtname' | translate }}"
            ng-change="toggleDeletePendingItvButton()"
          >
            <option style="text-align:center;" translate value="" selected>
              itv.soumission.interventiondelayed
            </option>
        </select>
      </div>
    </div>

    <!-- Identfiant pour appairage Fichier ITV - Données SIG -->
    <div class="row">
      <div class="col-xs-12" ng-show="conf.displayUseoldid">
        <label style="font-size:12px;">
          {{ 'itv.soumission.useoldid.id_automatic_matching' | translate }}
        </label>
        <span>
          <input  type="text" ng-model="useoldid.name" class="form-control"
            style="width:225px;height:34px;display:inline;"
            placeholder="{{ 'itv.soumission.useoldid.identifiant' | translate}}"
          />
        </span>
      </div>
    </div>

    <!-- Import des fichiers -->
    <div class="col-xs-12 form-group itv-unit-data"
      style="margin-top:10px;" id="forprogression">
			<!-- Fichier ITV lui même. -->
      <div class="col-md-12 itv-data" style="padding:0" ng-show="!inprogress">
        <input type="text" ng-model="itvxmltxtfile"
          placeholder="{{ 'itv.soumission.xmltxtname' | translate }}"
          class="form-control"
          ng-disabled="conf.config.network == undefined || conf.config.datastore == undefined"
          style="width:350px;height:34px;display:inline;"
          ng-class="{'error-option-true':modifOpt.xmltxtfile,
          'error-option-false':!modifOpt.xmltxtfile,
          'filename-already-submited': alreadySubmitedItv}" />
        <label ng-show='alreadySubmitedItv' class="already-submited">
          {{ 'itv.soumission.alreadySubmited' | translate }}
        </label>
        <label class="btn btn-default" style="margin-top:5px;"
					ng-disabled="conf.config.network == undefined || conf.config.datastore == undefined"
					ng-class="{'error-option-true':modifOpt.xmltxtfile,'error-option-false':!modifOpt.xmltxtfile}" >
        <input type="file" id="xmltxtfile" style="display: none;"
          ng-disabled="conf.config.network == undefined || conf.config.datastore == undefined"
          accept=".xml,.txt,.XML,.TXT"  onclick="this.value = null"
          onchange="angular.element(this).scope().fileNameChanged(this , 'itvxmltxtfile')"
          file-model="xmltxtfile"/>
        	<i class="fa fa-plus"></i>
        </label>
        <button type="button" class="btn btn-default"
          ng-disabled="conf.config.network == undefined
          || conf.config.datastore == undefined"
          ng-click="reset('itvxmltxtfile')" >
        <span class="glyphicon glyphicon-trash"> </span>
        </button>
      </div>
      <div class="col-md-12 itv-data" style="padding:0">
        <input
          type="text"
          ng-model="itvpdffile"
          placeholder="{{ 'itv.soumission.pdfrapport' | translate }}"
          class="form-control"
          style="width:350px;height:34px;display:inline;"
          ng-class="{'error-option-true': modifOpt.pdffile,'error-option-false':!modifOpt.pdffile}"
          ng-disabled="!xmlfileexist"
        />
        <label
          class="btn btn-default"
          style="margin-top:5px;"
          ng-class="{'error-option-true': modifOpt.pdffile,'error-option-false':!modifOpt.pdffile}"
          ng-disabled="!xmlfileexist"
        >
        <input
          type="file"
          id="pdffile"
          style="display: none;"
          accept=".pdf"
          onclick="this.value = null"
          onchange="angular.element(this).scope().fileNameChanged(this , 'itvpdffile')"
          file-model="pdffile"
          multiple
          ng-disabled="!xmlfileexist"
        />
        <i class="fa fa-plus"></i>
        </label>
        <button type="button" class="btn btn-default" ng-click="reset('itvpdffile')" ng-disabled="!xmlfileexist"><span class="glyphicon glyphicon-trash"></span></button>
      </div>
      <div class="col-md-12 itv-data" style="padding:0">
        <input
          type="text"
          ng-model="itvImagefile"
          placeholder="{{ 'itv.soumission.imagefile' | translate }}"
          class="form-control"
          style="width:350px;height:34px;display:inline;"
          ng-class="{'error-option-true': modifOpt.imagefile,'error-option-false':!modifOpt.imagefile}"
          ng-disabled="!xmlfileexist"
        />
        <label
          class="btn btn-default"
          style="margin-top:5px;"
          ng-class="{'error-option-true': modifOpt.imagefile,'error-option-false':!modifOpt.imagefile}"
          ng-disabled="!xmlfileexist"
        >
        <input
          type="file"
          id="imagefile"
          style="display: none;"
          accept=".zip,application/zip,image/*"
          onclick="this.value = null"
          onchange="angular.element(this).scope().fileNameChanged(event , 'itvImagefile')"
          file-model="imagefile"
          multiple
          ng-disabled="!xmlfileexist"
        />
        <i class="fa fa-plus"></i>
        </label>
        <button type="button" class="btn btn-default" ng-click="reset('itvImagefile')" ng-disabled="!xmlfileexist"><span class="glyphicon glyphicon-trash"></span></button>
      </div>
      <div class="col-md-12 video-input-line itv-data">
        <input
          type="text"
          ng-model="itvVideofile"
          placeholder="{{ 'itv.soumission.videofile' | translate }}"
          class="form-control video-input"
          ng-class="{'error-option-true': modifOpt.videofile,'error-option-false':!modifOpt.videofile}"
          ng-disabled="!xmlfileexist"
        />
        <label
          class="btn btn-default video-input-label"
          ng-class="{'error-option-true': modifOpt.videofile,'error-option-false':!modifOpt.videofile}"
          ng-disabled="!xmlfileexist"
        >
          <input
            type="file"
            id="videofile"
            class="video-input-file"
            accept=".zip,application/zip,video/*"
            onclick="this.value = null"
            onchange="angular.element(this).scope().fileNameChanged(event , 'itvVideofile')"
            file-model="videofile"
            multiple
            ng-disabled="!xmlfileexist"
          />
          <i class="fa fa-plus"></i>
        </label>
        <button
          type="button"
          class="btn btn-default"
          ng-click="reset('itvVideofile')"
          ng-disabled="!xmlfileexist"
        >
          <span class="glyphicon glyphicon-trash"></span>
        </button>
      </div>
    </div>
    <div class="itv-import-video-warn">
      <i class="fa fa-info-circle" aria-hidden="true"></i>
      <span>{{ 'itv.soumission.importVideo' + (conf.config.importVideo ? 'Enabled' : 'Disabled') | translate }}</span>
    </div>
    <div class="col-xs-12 form-group"
      style="padding-right:35px;position:absolute;bottom:0px;" >
      <button
        type="button"
        class="btn btn-default"
        ng-disabled="conf.config.network == undefined || conf.config.datastore == undefined || waitImport"
        ng-click="tabs.activeTab = 1" style="float:right;"
      >
        <a class="itv a" href>
          <span>{{ 'itv.next' | translate }}</span>&nbsp;&nbsp;&nbsp;&nbsp;
          <span class="glyphicon glyphicon-arrow-right" style="top:2px;"></span>
        </a>
      </button>
    </div>
  </div>


  <!--------------------------->
  <!-- ONGLET Correspondance -->
  <!--------------------------->
  <div style="width:100%;" ng-show="tabs.activeTab == 1" >
    <div class="row">
      <div class="col-xs-12">
        <div class="panel-group itv-correspondance-panel" data-start-collapsed="false"
          data-animation="am-flip-x" bs-collapse>
          <div class="panel panel-info">
            <div class="panel-heading">
              <h4 class="panel-title">
                <span ng-show="mode == 'config'" style="display:inline;float:left;" 
                data-template="js\XG\widgets\utilities\itv\views\soumission\itvSoumissionConfigtable.html"
                data-auto-close="1"
                data-placement="bottom-left" data-animation="am-flip-x"
                bs-popover>
                </span>
                <a bs-collapse-toggle ng-click="headerin = !headerin"
                  ng-hide="hideHeaderTitle===true">
                  <translate style="font-size:11px;">
                    <strong>itv.correspondance.headers</strong>
                  </translate>
                </a>
                <button
                  class="insPortionsListMenu dropdown"
                  ng-click="loadMenu()"
                  data-animation="am-flip-x"
                  data-html="1"
                  data-placement="right"
                  bs-dropdown="insPortionsListMenu"
                >
                  <i class="fa fa-list"></i>
                </button>
              </h4>
            </div>
            <div  class="panel-collapse collapse"
              ng-class="{'itvsoum-small-list':$hiderow,
                'itvsoum-large-list': !$hiderow}"
              id="parts_container_{{$id}}"
              style="overflow:auto;" bs-collapse-target>
              <div class="panel-body itvtable"
                style="max-width:800px;padding:0;">
                <itv-soumission-part-list></itv-soumission-part-list>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <div ng-show="hideHeaderTitle===true"
          style="width: 100%; text-align: center;">
          <i class="fa fa-spinner fa-pulse fa-3x fa-fw">
          </i>
        </div>

        <div class="row corresp-row" ng-show="$hiderow">
          <itv-soumission-correspondance class="col-md-12 corresp-comp" corresp="corresp"
            information="information" map="map" networks="networks" conf="conf"
            config="config" pointer="pointer" selected="selected"
            $hiderow="$hiderow" corresp-polygons="correspPolygons"
            wrong-length="wrongLength" current-part="currentPart"
            selected-part="selectedPart" get-itv-id="getItvId" zoom-on-features="zoomOnFeatures">
          </itv-soumission-correspondance>
        </div>
      </div>
    </div>

    <!-- Détails -->
    <div class="row" ng-hide="!$hiderow">
      <div class="col-xs-12" >
        <div class="panel-group" data-start-collapsed="true" bs-collapse>
          <div class="panel panel-info" style="max-height:140px;">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a bs-collapse-toggle ng-click="openDetails()">
                  <translate style="font-size:11px;">
                    <strong>itv.correspondance.details</strong></translate>
                </a>
              </h4>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="actions">
      <button
        class="btn btn-default"
        type="button"
        ng-disabled="!previousPart"
        title="{{ 'itv.previousPart' | translate }}"
        ng-click="getPart(previousPart,true);gotoAnchor(-1);"
      >
        <span class="fa fa-arrow-circle-left fa-3x"></span>
      </button>
      <button
        class="btn btn-default"
        type="button"
        ng-disabled="!currentPart"
        title="{{ 'itv.soumission.backToList' | translate }}"
        ng-click="getPart(currentPart,false)">
        <span class="fa fa-undo fa-2x"></span>
      </button>
      <button
        class="btn btn-default"
        type="button"
        ng-disabled="!nextPart"
        title="{{ 'itv.nextPart' | translate }}"
        ng-click="getPart(nextPart,true);gotoAnchor(+1);"
      >
        <span class="fa fa-arrow-circle-right fa-3x"></span>
      </button>
    </div>
  </div>


  <!--------------------->
  <!-- ONGLET Synthese -->
  <!--------------------->
  <div style="overflow-y:auto;overflow-x:hidden;" ng-show="tabs.activeTab == 2">
    <div class="col-xs-12" class="itvSyntheseInfoHeight">
      <dl style="height:110px;">
        <dt><strong class="itvSyntheseInfo">{{ 'itv.synthese.add' | translate }}</strong></dt>
        <dd>
          <div class="col-xs-10">
            <strong class="itvSyntheseInfo">{{ 'itv.synthese.checkedSynthese.formulaire' | translate }}</strong>
          </div>
          <div class="col-xs-2">
            <span class="glyphicon glyphicon-ok text-success"></span>
          </div>
        </dd>
        <dd>
          <div class="col-xs-10">
            <strong class="itvSyntheseInfo">{{ 'itv.synthese.checkedSynthese.normeEn' | translate }}</strong>
          </div>
          <div class="col-xs-2">
            <span class="glyphicon glyphicon-ok text-success"></span>
          </div>
        </dd>
        <dd>
          <div class="col-xs-10">
            <strong class="itvSyntheseInfo">{{ 'itv.synthese.checkedSynthese.identifantcorrecte' | translate }}</strong>
          </div>
          <div class="col-xs-2">
            <span class="glyphicon glyphicon-ok text-success"></span>
          </div>
        </dd>
        <dd>
          <div class="col-xs-10">
            <strong class="itvSyntheseInfo">{{ 'itv.synthese.checkedSynthese.picpresence' | translate }} : {{compteurImages}} / {{totalImage}}</strong>
          </div>
          <div class="col-xs-2">
            <span ng-class="{'glyphicon glyphicon-ok text-success': information.synthese.checkedSynthese.picpresence,'glyphicon glyphicon-remove text-danger':!information.synthese.checkedSynthese.picpresence}"></span>
          </div>
        </dd>
        <dd ng-show="information.videosinDetails.length > 0">
          <div class="col-xs-10">
            <strong class="itvSyntheseInfo">{{ 'itv.synthese.checkedSynthese.videopresence' | translate }} : {{compteurVideos}} / {{information.videosinDetails.length}}</strong>
          </div>
          <div class="col-xs-2">
            <span ng-class="{
              'glyphicon glyphicon-ok text-success': compteurVideos === information.videosinDetails.length,
              'glyphicon glyphicon-remove text-danger': compteurVideos !== information.videosinDetails.length
            }">
            </span>          
          </div>
        </dd>
      </dl>
    </div>
    <div class="col-xs-12" >
      <div class="panel-group" bs-collapse>
        <div class="panel panel-info itvSynthesePanel">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a bs-collapse-toggle>
                <translate class="itvInfoTitle"><strong>itv.synthese.imagestatus</strong></translate>
              </a>
            </h4>
          </div>
          <div  class="panel-collapse collapse am-collapse itvSyntheseTable" bs-collapse-target>
            <div class="panel-body detailtablesec itvSyntheseTableInfo">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-12">
      <div classitvSyntheseInfo="panel-group" bs-collapse ng-show="information.videosinDetails.length >0">
        <div class="panel panel-info itvSynthesePanel">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a bs-collapse-toggle>
                <translate class="itvInfoTitle"><strong>itv.synthese.videostatus</strong></translate>
              </a>
            </h4>
          </div>
          <div  class="panel-collapse collapse am-collapse itvSyntheseTable" bs-collapse-target>
            <div class="panel-body detailvideotablesec itvSyntheseTableInfo">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-12" >
      <div class="panel-group"
        data-start-collapsed="{{ avertissementsDoesNotExist }}" bs-collapse>
        <div class="panel panel-info itvSynthesePanel">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a bs-collapse-toggle class="itvInfoTitle">
                <translate><strong>itv.synthese.avertissement</strong></translate>
                <span class="badge">{{information.synthese.avertissementCount}}</span>
              </a>
            </h4>
          </div>
          <div  class="panel-collapse collapse am-collapse itvSyntheseTable" bs-collapse-target>
            <div class="panel-body itvSyntheseTableInfo">
              <ul ng-repeat="avertissement in information.synthese.avertissement">
                <li class="itvInfoTitle">{{ avertissement.text }}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Commandes en bas de fenêtre-->
    <div class="row form-group gc-align-items-bottom itvSyntheseBottom"
      ng-show="notSaving">
      <div class="col-xs-4" style="padding:0;">
        <!-- Commande PANNEAU PRECEDENT -->
        <button type="button" class="btn btn-default"
          ng-class="{'itvSoumBtnMargin': createConnectionPipeCfgOk()}"
          ng-show="btnManagement.apply1==='apply0'"
          ng-click="tabs.activeTab = 1"
          style="float:left;">
        <a>
        <span class="glyphicon glyphicon-arrow-left" style="top:2px;">
        </span>&nbsp;&nbsp;&nbsp;&nbsp;
        <span>{{ 'itv.previous' | translate }}</span>
        </a>
        </button>
        <!-- Commande NE PAS SOUMETTRE -->
        <button type="button" class="btn btn-default"
          ng-class="{'itvSoumBtnMargin': createConnectionPipeCfgOk()}"
          ng-show="btnManagement.apply1==='apply1'"
          ng-click="btnManagement.apply1='apply0'"
          style="float:left;">
        <a>
        <span>{{ 'itv.synthese.doNotApply' | translate }}</span>
        </a>
        </button>
      </div>
      <!-- Commande EXPORTER LA SYNTHESE -->
      <div class="col-xs-8 btn-group" style="padding:0;"
        ng-if="appType!=='indigau'">
        <div class="row gc-align-items-bottom">
          <div class="col-xs-8"style="text-align:center;">
            <button class="btn btn-info "
              ng-class="{'itvSoumBtnMargin': createConnectionPipeCfgOk()}"
              ng-disabled="rapportSoumis" style="text-align:center;"
              data-animation="am-fade-and-scale" data-placement="center"
              ng-click="exporter()" >
              <span>
              {{ 'itv.synthese.Exporter' | translate }}
              </span>
            </button>
          </div>
          <!-- SOUMETTRE avec case à cocher Créer les branchements-->
          <div class="col-xs-4">
            <!-- Créer les branchements -->
            <div class= "itvInlineFlex"
              ng-show="createConnectionPipeCfgOk()">
              <input type="checkbox" ng-model="ws.createConnectionPipes">
              <label class="itvInlineLabel">
                &nbsp;{{ 'itv.synthese.createConnectionPipes' | translate }}
              </label>
            </div>
            <!-- SOUMETTRE -->
            <button type="button" class="btn btn-success"
              ng-disabled="rapportSoumis" ng-click="soumettre()">
              <span>{{ 'itv.synthese.apply' | translate }}</span>
            </button>
          </div>
        </div>
      </div>
      <div class="col-xs-8 btn-group" style="padding:0;"
        ng-if="appType==='indigau'">
        <div class="col-xs-8" ng-show="btnManagement.apply1!=='apply1'">
          <center>
            <button type="button" class="btn btn-info"
              ng-disabled="rapportSoumis"
              style="text-align:center;" data-animation="am-fade-and-scale"
              data-placement="center"
              ng-click="exporter()" >
            <span>
            {{ 'itv.synthese.Exporter' | translate }}
            </span>
            </button>
          </center>
        </div>
        <div class="col-xs-4" ng-show="btnManagement.apply1!=='apply1'">
          <button type="button" class="btn btn-success" ng-disabled="rapportSoumis" ng-click="btnManagement.apply1='apply1'"><span>{{ 'itv.synthese.apply1' | translate }}</span></button>
        </div>
        <div class="col-xs-8" ng-show="btnManagement.apply1==='apply1'">
          <center>
            <input type="button"
              class="btn btn-success itvButton"
              ng-disabled="rapportSoumis"
              style="text-align:center;"
              data-animation="am-fade-and-scale"
              data-placement="center"
              ng-click="btnManagement.apply1='apply0';soumettre(false)"
              value="{{ 'itv.synthese.applyWithoutRerau' | translate }}">
          </center>
        </div>
        <div class="col-xs-4" ng-show="btnManagement.apply1==='apply1'">
          <input type="button" class="btn btn-success itvButton"
            ng-disabled="rapportSoumis"
            ng-click="btnManagement.apply1='apply0';soumettre(true)"
            value="{{ 'itv.synthese.applyWithRerau' | translate }}">
        </div>
      </div>
    </div>
    <div class="col-xs-12 form-group"
      ng-show="!notSaving"
      style="width:410px;padding-left:10px;position:absolute;bottom:0px;">
      <i class="fa fa-spinner fa-pulse fa-3x fa-fw" ng-show="showSpinner1"></i>
      <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"
        ng-show="showSpinner2">
      </i>
    </div>
  </div>
</div>
