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


<a ng-href="#!/agendarVisita" class="ui green rigth floated button">
    <i class="calendar plus outline icon"></i>
    Agendar visita</a>



        <button type="button" class="ui blue   button" ng-click="ObtenerSkyview()">
            <i class="refresh icon"></i>
            Actualizar</button>

<br>
<br>
<p style="font-size: 12px;">Total de registros {{filterData.length}}</p>
<!-- ui blue very table compact celled -->
<table class="ui fixed table" style="margin-top: 0px; border-top: none;">
    <thead>
        <tr>
            <th style="color: white; background-color: #0F3282; width: 50px;">
                id
                <br>
                <!-- <div class="ui input">
                    <input ng-model="filtro.Title" type="text" placeholder="Filtro" capitalize>
                </div> -->
            </th>

            <th style="color: white; background-color: #0F3282">
                Nombre institución
                <br>
                <div class="ui input">
                    <input ng-model="filtro.Title" type="text" placeholder="Filtro" capitalize>
                </div>
            </th>

            <th style="color: white; background-color: #0F3282">
                Tipo institución
                <!-- <br>
                <div class="ui input">
                    <input ng-model="filtro.TipoInstitucion" type="text" placeholder="Filtro" capitalize>
                </div> -->
                <br>
                <select ng-model="filtro.TipoInstitucion"
                    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 tipoInstitucionSkyview" value="{{option.Valor}}">{{option.Valor}}</option>
                </select>
            </th>

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

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

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


            <th style=" color: white; background-color: #0F3282">
                Fecha
                <br>
                <div class="ui input">
                    <input ng-model="filtro.FechaVisita" type="text" placeholder="Filtro" capitalize>
                </div>
            </th>

            <th style="color: white; background-color: #0F3282">
                Número alumnos <br>
                <div class="ui input">
                    <input ng-model="filtro.NumeroAlumnos" type="text" placeholder="Filtro" capitalize>
                </div>
            </th>


            <th style="color: white; background-color: #0F3282">
                Número confirmados <br>
                <div class="ui input">
                    <input ng-model="filtro.NumeroConfirmados" type="text" placeholder="Filtro" capitalize>
                </div>
            </th>

            <th style="color: white; background-color: #0F3282">
                Mes<br>

                <select ng-model="filtro.Mes " 
                    style="padding: 6px 12px !important; border-radius: .28571429rem; height: 30px;    width: 130px; background-color: white; color: rgba(0, 0, 0, 0.87);">
                    <option ng-repeat="meses in monthNames" value="{{meses.nombre}}" ng-init="filtro.Mes = mesActual.nombre">
                        {{meses.nombre}}
                    </option>

                </select>
            </th>

            <th style="color: white; background-color: #0F3282">
                Año<br>

                <select ng-model="filtro.Anio " 
                style="padding: 6px 12px !important; border-radius: .28571429rem; height: 30px;    width: 130px; background-color: white; color: rgba(0, 0, 0, 0.87);">
                <option ng-repeat="anioActual in anioCarga" value="{{anioActual.anio}}" ng-init="filtro.Anio = _anio">
                    {{anioActual.anio}}
                </option>

            </select>

            </th>


            <!-- <th style="color: white; background-color: #0F3282 ; "></th> -->
            <th style="color: white; background-color: #0F3282 ;width: 40px " ng-show="isAdmin"></th>
        </tr>
        </tr>

    </thead>
    <tbody>
        <tr ng-repeat="datos in filterData = (skyview | filter: filtro)">
            <td style="vertical-align: middle">{{datos.ID}}</td>
            <td style="vertical-align: middle">
                <a ng-href="#!/Vista/{{datos.ID}}"><i class="share icon"></i> {{datos.Title}}</a>
            </td>
            
            <td style="vertical-align: middle">{{datos.TipoInstitucion}}</td>
            <td style="vertical-align: middle">{{datos.Carrera}}</td>
            <td style="vertical-align: middle">{{datos.Curso}}</td>
            <td style="vertical-align: middle">{{datos.Encargado}}</td>
                                                
            <td style="vertical-align: middle">{{datos.FechaVisita | date: "dd-MM-yyyy"}}</td>
            
            <td style="vertical-align: middle">{{datos.NumeroPersonas}}</td>

            <td style="vertical-align: middle">{{datos.NumeroConfirmados}}</td>

            <td style="vertical-align: middle">{{datos.Mes}}</td>
            <td style="vertical-align: middle">{{datos.Anio}}</td>
            <td style="padding-right: 0px;" ng-show="isAdmin">
                <button class="ui icon tiny red button" type="button" style="min-width: 25px; padding: 4px 3px;"
                    ng-click="eliminarSkyview(datos.ID)">
                    <i class="trash alternate icon"></i>

                </button>
            </td>
        </tr>
    </tbody>
</table>