<h3 class="ui header" style="padding-top: 20px;">
    REPORTES DE ACTIVIDADES</h3>
<div class="ui divider"></div>

<div id="actions" class="">
    <!-- <a ng-href="#!/CrearAsunto" class="ui green right floated button" style="margin-top: 20px;">
        <i class="calendar plus outline icon"></i>
        Crear asunto</a> -->

    <button type="button" class="ui blue right floated button" ng-click="obtenerAsuntos()" style="margin-top: 20px;">
        <i class="refresh icon"></i>
        Actualizar</button>
</div>

<!-- Encabezado de busqueda -->
<div class="row justify-content-md-left">
    <div class="col col-lg-3">
        <div class="form-group">
            <label for="formGroupExampleInput">Desde</label>
            <input type="date" class="form-control" id="formGroupExampleInput" ng-model="asuntosFiltroDesde">
        </div>
    </div>

    <div class="col col-lg-3">
        <div class="form-group">
            <label for="formGroupExampleInput">Hasta</label>
            <input type="date" class="form-control" id="formGroupExampleInput" ng-model="asuntosFiltroHasta">
        </div>
    </div>

    <div class="col col-lg-2">
        <div class="form-group">
            <label for="formGroupExampleInput">&nbsp;</label>
            <button type="button" class="form-control ui right labeled icon button blue" ng-click="filtrarAsuntos()">
                <i class="search icon"></i>
                Filtrar
            </button>
        </div>
    </div>
</div>





<!-- <br> -->
<span style="font-size: 12px;">Total de registros {{filterData.length}}</span>
<table class="ui fixed table" style="margin-top: 0px; border-top: none;">
    <thead>
        <tr>
            <!-- ID -->
            <th style=" color: white;
                    background-color: #0F3282 ;
                    width: 50px;">
                # ID
            </th>

            <!-- NOMBRE ACTIVIDAD -->
            <th style="color: white; background-color: #0F3282 ;  width: 200px ">
                Nombre actividad
                <br>
                <div class="ui input">
                    <input ng-model="filtro.Title" type="text" placeholder="Filtro" capitalize>
                </div>
            </th>

             <!-- FECHA MODIFICACION -->
             <th style=" color: white; background-color: #0F3282 ; width: 100px">
                Modificado
            </th>

            <!-- DESCRIPCION -->
            <th style=" color: white; background-color: #0F3282 ;">
                Descripcion
            </th>

             <!-- OPERACION -->
             <th style=" color: white; background-color: #0F3282 ; width: 100px">
                Operacion
            </th>

             <!-- COMUNA -->
             <th style=" color: white; background-color: #0F3282 ; width: 100px">
                Comuna
            </th>

             <!-- PARTICIPANTES -->
             <th style=" color: white; background-color: #0F3282 ; width: 100px">
                Participantes
            </th>

             <!-- GASTADO -->
             <th style=" color: white; background-color: #0F3282 ; width: 100px">
                Gastado
            </th>

             <!-- ASUNTO -->
             <th style=" color: white; background-color: #0F3282 ;">
                Asunto
            </th>


            <!-- <th style="color: white; background-color: #0F3282; ">
                Modificado por
                <br>
                <div class="ui input">
                    <input ng-model="filtro.Editor.Title" type="text" placeholder="Filtro">
                </div>
            </th> -->

            <!-- <th style=" color: white; background-color: #0F3282 ; ">
                Ambito
                <br>
                <select ng-model="filtro.Ambito" style="padding: 6px 12px !important;
                    border-radius: .28571429rem;
                    height: 30px;
                    background-color: white;
                    color: rgba(0, 0, 0, 0.87);" ng-change="obtenerProgramas(filtro.Ambito)">
                    <option value="">Todos</option>
                    <option ng-repeat="option in ambitos" value="{{option.Valor}}">{{option.Valor}}</option>
                </select>

            </th>
            <th style="color: white; background-color: #0F3282 ; ">
                Programa
                <br>
                <select ng-model="filtro.Programa"
                    style="padding: 6px 12px !important; border-radius: .28571429rem; height: 30px; width: 170px; background-color: white; color: rgba(0, 0, 0, 0.87);">
                    <option value="">Todos</option>
                    <option ng-repeat="option in programas" value="{{option.Valor}}">{{option.Valor}}</option>
                </select>
            </th>

            <th style=" color: white; background-color: #0F3282 ; width: 120px">
                Zona
                <br>
              
                <select ng-model="filtro.Operacion"
                    style="padding: 6px 12px !important; border-radius: .28571429rem; height: 30px;    width: 110px; background-color: white; color: rgba(0, 0, 0, 0.87);"
                    ng-change="obtenerComunasUsuario(filtro.Operacion)">
                    <option value="">Todos</option>
                    <option ng-repeat="option in zonasUsuario" value="{{option.zona}}">{{option.zona}}
                    </option>
                </select>

            </th>

            <th style="color: white; background-color: #0F3282 ;    width: 120px ">
                Comuna
                <br>
                <select ng-model="filtro.Comuna"
                    style="padding: 6px 12px !important; border-radius: .28571429rem; height: 30px; background-color: white; color: rgba(0, 0, 0, 0.87);">
                    <option value="">Todos</option>
                    <option ng-repeat="option in comunasUsuarioData" value="{{option.Comuna}}">{{option.Comuna}}
                    </option>
                </select>
            </th>

            <th style="color: white; background-color: #0F3282 ; width: 100px">
                Participantes <br>
            </th>



            <th style="color: white; background-color: #0F3282 ; width: 100px">
                Presupuesto <br>
            </th>

            <th style="color: white; background-color: #0F3282 ; width: 100px">
                Gastado <br>
            </th>

            <th style="color: white; background-color: #0F3282 ; width: 100px">
                Diferencia <br>
            </th> -->

        </tr>

    </thead>
    <tbody>
        <tr ng-repeat="datos in filterData = (AccionesData | filter: filtro)">
            <td style="vertical-align: middle">{{datos.ID}}</td>
            <td style="vertical-align: middle">{{datos.Title}}</td>
            <td style="vertical-align: middle">{{datos.Modified | date: "dd-MM-yyyy"}}</td>
            <!-- <td style="vertical-align: middle">{{datos.Editor.Title}}</td> -->
            <td style="vertical-align: middle">{{datos.Descripcion}}</td>
            <td style="vertical-align: middle">{{datos.Operacion}}</td>
            <!-- <td style="vertical-align: middle">{{datos.Operacion}}</td> -->
            <td style="vertical-align: middle">{{datos.Comuna}}
                <span ng-show="datos.Comuna == 'Otra'">( {{datos.OtraComuna}} )</span>
            </td>
            <td style="vertical-align: middle">{{datos.Participantes}}</td>
            <!-- <td style="vertical-align: middle">{{datos.Presupuesto | currency}}</td> -->
            <td style="vertical-align: middle">{{datos.Gastado | currency}}</td>
            <!-- <td style="vertical-align: middle">{{datos.Diferencia | currency}}</td> -->

            <td style="vertical-align: middle">
                <a ng-href="#!/Asunto/{{datos.AsuntoId}}"><i class="share icon"></i> {{datos.Asunto.Title}}</a>
            </td> 
        </tr>
    </tbody>
</table>