<div class="inicio" ng-show="MostrarPaginaInicio" ng-click="paginaInicio()" style="position: relative; left: 0; top: 0;">
    <img  class="logotc"  src="image/LOGO.png" alt="" loop=”2”/>
    <h1 class="tituloIniFin">¡Bienvenidos!</h1>
    <img  class="LogoTecPlus"  src="image/LogoTecPlus.png" alt="" loop=”2” /> 
</div>
<div class="ContenedorTerminosButton" style="position: absolute;top: 60%;left: calc(50% - 165px);">
    <button class="btn btn-success" style="width: 330px;height: 80px;font-size: 28px;" ng-click="openTurnos()">Ver turnos</button>
</div>
<div>
    <div class="ContenedorTerminos" ng-show="MostrarTerminos">
        <div class="ContenedorTerminosText">
            <span>
                En este apartado se indican la polìtica de privacidad!
            </span>
        </div>
        <div class="ContenedorTerminosButton">
            <button class="btn btn-success" ng-click="ValidarSelecTipTurn()">Aceptar</button>
        </div>
    </div>
</div>


<div class="modal fade" id="turnos" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header cssmodalcalificador" style="background-color: #540AC1;">
                <h5 class="modal-title titulocalificador" style="color:#ffff">Turnos :</h5>
                <button type="button" class="close" ng-click="close()">
                    <span aria-hidden="true" class="xcalificador">&times;</span>
                </button>
            </div>
            <div class="modal-body centrarEnModal" style="    height: 80vh;
    overflow: scroll;">
                <div class="form-group">
                    <label for="exampleFormControlInput1">Buscar: </label>
                    <input type="text" class="form-control" id="exampleFormControlInput1" ng-change="changeQ(q)" placeholder="Buscar..." ng-model="q">
                  </div>
                <table class="table tablaCompleta my-custom-scrollbar ">
                    <thead class="thead-light">
                        <tr >
                            <th style="border-bottom: 2px solid #540AC1;" scope="col" style="background-color: white;">Turno</th>
                            <th style="border-bottom: 2px solid #540AC1;" scope="col" style="background-color: white;">Nombre paciente</th>
                            <th style="border-bottom: 2px solid #540AC1;" scope="col" style="background-color: white;">Cedula paciente</th>
                            <th style="border-bottom: 2px solid #540AC1;" scope="col" style="background-color: white;">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="ser in Turnos">
                            <th scope="row" style="border-bottom: 2px solid #540AC1;" class="infotablaServicio">{{ser.Turno}} </th>
                            <th scope="row" style="border-bottom: 2px solid #540AC1;" class="infotablaServicio">{{ser.Nombre}}</th>
                            <th scope="row" style="border-bottom: 2px solid #540AC1;" class="infotablaServicio">{{ser.Cedula}}</th>
                            <th scope="row" style="border-bottom: 2px solid #540AC1;display: flex;flex-direction:column" class="infotablaServicio"> 
                                <button type="button" style="margin:1%"
                                    ng-click="Ver(ser.Turno)" 
                                    class="btn btn-primary buttonCalificar ">
                                    Ver turnos
                                </button>
                                   <button type="button" style="margin:1%"
                                    ng-click="Cancelar(ser.Turno)" 
                                    class="btn btn-primary buttonCalificar ">
                                    Cancelar
                                </button>
                            </th>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="turnosDetalles" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header cssmodalcalificador" style="background-color: #540AC1;">
                <h5 class="modal-title titulocalificador" style="color:#ffff">Turnos :</h5>
                <button type="button" class="close" ng-click="closeDetalle()">
                    <span aria-hidden="true" class="xcalificador">&times;</span>
                </button>
            </div>
            <div class="modal-body centrarEnModal">
                <table class="table tablaCompleta my-custom-scrollbar ">
                    <thead class="thead-light">
                        <tr >
                            <th style="border-bottom: 2px solid #540AC1;" scope="col" style="background-color: white;">Turno</th>
                            <th style="border-bottom: 2px solid #540AC1;" scope="col" style="background-color: white;">Servicio</th>
                            <th style="border-bottom: 2px solid #540AC1;" scope="col" style="background-color: white;">Estado</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="serv in TurnosDetalle" class="tr" ng-class="{'alert alert-success':serv.Estado=='TERMINADO','alert alert-warning':serv.Estadotemporal=='Llamando'}">
                            <th scope="row" style="border-bottom: 2px solid #540AC1;" class="infotablaServicio" >{{serv.Turno}} </th>
                            <th scope="row" style="border-bottom: 2px solid #540AC1;" class="infotablaServicio" >{{serv.Servicio}}</th>
                            <th scope="row" style="border-bottom: 2px solid #540AC1;" class="infotablaServicio" >{{serv.Estadotemporal == "Llamando" ? "En atencion": serv.Estado == "NORMAL" ? "Pendiente":serv.Estado == "TERMINADO" ?"Atendido":""}}</th>
                            <th scope="row" style="border-bottom: 2px solid #540AC1;" class="infotablaServicio">
                                <button type="button" style="margin:1%"
                                    ng-click="CancelarDetalle(serv.IdAuditoria,serv.Turno)" 
                                    class="btn btn-primary buttonCalificar ">
                                    Cancelar
                                </button>
                            </th>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>