@extends('master')

@section('titulo')
    {{ Lang::get('admin/_11620.titulo') }}
@endsection

@section('estilo')
    <link rel="stylesheet" href="{{ elixir('assets/css/11620.css') }}" /> 
@endsection

@section('conteudo')
<div ng-controller="Ctrl as vm" ng-cloak>

    @php $hab_agendamentos	=  fn_parametro('SISTEMA.HAB_AGEND_CLIENTE', Auth::user()->CODIGO );

    <input type="hidden" class="param_evento" value="{{fn_parametro('TBUSUARIO.VER_LEMBRETE_USUARIO', Auth::user()->CODIGO)}}">
    <input type="hidden" class="_hab_agendamentos"		id="_hab_agendamentos"		value="{{$hab_agendamentos}}"		>

    <div class="tab-acoes" style="margin-top: 30px;">   

        <ul class="list-inline" style="position: absolute; right: 190px; z-index: 999; top: 36px !important;">    
            <li>
                <button 
                    type="button" 
                    class="btn btn-primary btn-incluir" 
                    ng-click="vm.mesAnterior()">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </button>
            </li> 
            
            <li>
                <button 
                    type="button" 
                    class="btn btn-primary btn-incluir" 
                    ng-click="vm.mesHoje()">Hoje
                </button>
            </li> 

            <li>
                <button 
                    type="button" 
                    class="btn btn-primary btn-incluir" 
                    ng-click="vm.mesProximo()">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </button>
            </li>  

        </ul>  

        <span style="font-size: 30px; font-weight: bold;"> @{{vm.CONFIGURACAO.MES_DESCRICAO + ' de ' + vm.CONFIGURACAO.ANO}}</span>

        <div class="form-group" style="margin-left: 35px;">
            <label>Turno:</label>
            <select style="width: 115px; height: 32px;" ng-model="vm.Calendario.FILTRO_TURNO" class="form-control">					
                <option value=""> TODOS</option>
                <option value="1">MANHÃ</option>
                <option value="2">TARDE</option>
                <option value="3">NOITE</option>
            </select>
        </div>
        <div ng-show="vm.ParamEvento == 1" style="display: -webkit-inline-box; margin-left: 35px;" class="consulta-usuario-filtro"></div>
        <div ng-show="vm.hab_agendamentos == 1" style="margin-left: 15px !important;" class="consulta-consultorio-filtro"></div>

        <div class="form-group" style=" width: fit-content; padding-right: 10px; margin-top: 21px;">
            <button 
                type="submit" 
                class="btn btn-xs btn-primary btn-filtrar"
                data-hotkey="alt+f" 
                id="btn-table-filter" 
                style="margin-left: 10px; padding: 4px; padding-right: 8px; margin-top: 4px;"
                ng-click="vm.Montar()">
                <span class="glyphicon glyphicon-filter"></span> Filtrar
            </button>
        </div>
        <!-- <div class="form-group" style=" width: fit-content; padding-right: 10px; margin-top: 21px;">
            <button 
                type="submit" 
                style="padding: 5px; margin-left: 15px; margin-top: 4px;"      
                class="btn btn-xs btn-primary btn-filtrar" 
                data-hotkey="alt+f"
                id="btn-table-filter"
                ng-click="vm.Montar()">
                <span class="glyphicon glyphicon-filter">Filtrar</span> 
            </button>
        </div> -->
            
        <div class="input-group" style="position: absolute; right: 0px; z-index: 999; top: 36px !important;">
            <select style="width: 185px;" name="repeatSelect" id="repeatSelect" ng-model="vm.CONFIGURACAO.TIPO" ng-change="vm.Montar();">
                <option ng-value="1">D - Dia</option>
                <option ng-value="2">S - Semana</option>
                <option ng-value="3">M - Mês</option>
                <option ng-value="4">P - Programação</option>
            </select>
        </div>


    </div>
    
    <div class="gc-calendario" style="margin-top: 25px; height: calc(100vh - 160px); /* height: 750px; */"> <!-- height: 750px; -->

        <div class="painel-ferramenta">

            <ul class="list-inline"
             style="color: white;
                    font-weight: bold;
                    height: 30px;
                    padding: 10px;
                    margin-bottom: 20px;">    
                <li style="padding: 0px;">
                    <button 
                        type="button" 
                        class="btn btn-sm btn-primary btn-incluir" 
                        ng-click="vm.Calendario.incluir(vm.DATA_TELA)">
                        <span class="glyphicon glyphicon-plus"></span>Adicionar
                    </button>
                </li>

                <!-- <li>
                    <button 
                        type="button" 
                        class="btn btn-sm btn-primary btn-incluir" 
                        ng-click="vm.mesHoje()">Hoje
                    </button>
                </li>  -->
            </ul>


            <ul class="list-inline"
             style="margin-bottom: 0px;
                    margin-left: 5px;
                    background-color: #0000cd;
                    margin-right: 5px;
                    margin-top: 3px;
                    color: white;
                    font-weight: bold;
                    height: 30px;
                    padding: 3px;
                    text-align: center !important;">    
                <li style="text-align: center !important; padding: 2px !important;">@{{vm.CONFIGURACAO2.MES_DESCRICAOS + ' de ' + vm.CONFIGURACAO2.ANO}}</li>
                <li style="padding: 0px; float: left;">
                    <button 
                        type="button" 
                        class="btn btn-sm btn-primary btn-incluir" 
                        ng-click="vm.mesAnterior2()">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                    </button>
                </li>
                <li style="padding: 0px; float: right;">
                    <button 
                        type="button" 
                        class="btn btn-sm btn-primary btn-incluir" 
                        ng-click="vm.mesProximo2()">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                    </button>
                </li>  

            </ul>
			
			
			<div class="painel-calendario"
                style="
                width: calc(100% - 10px);
                height: 180px;
                font-size: 14px;
                margin-left: 5px;">
                <div class="gc-calendario-titulo" style="height: 25px !important;">
                    <div ng-repeat="nomes in vm.dataConfig.dayNamesShort2 track by $index" class="titulo" style="font-size: 14px !important; padding: 2px !important;">
                        @{{nomes}}
                    </div>
                </div>

                <div class="gc-calendario-dias">
                    <div ng-repeat="data in vm.DIAS2" ng-click="vm.setarDia(data.ANO,data.MES,data.DIA)" class="dia" ng-class="{'data-atual' : data.ATUAL == 1, 'data-olter' : data.ATUAL == 0, 'data-hoje' : data.HOJE == 1, 'data-hoje-selected' : data.HOJE2 == 1}">
                        @{{data.DIA}}
                    </div>
                </div>
            </div>

            <br>
            <div style="padding: 3px; text-align: center; font-weight: bold;"> 
                <legend style="font-weight: bold;">Agendamentos</legend>
                <div
                    class="evento-calendario"
                    ng-style="{ 'background-color' : (evento.ETIQUETA != '') ? evento.ETIQUETA + '! important' : 'unset', 'color' : evento.COLOR_FONT }"
                    ng-class="{'feriado-calendario': evento.TIPO_DE_EVENTO.trim() == 'Feriado' , 'evento-inativo' : evento.STATUS == 0}"
                    style="text-align: left;"
                   
                    ttitle="@{{evento.TTITULO}}"
                    ng-click="vm.Calendario.open(evento); $event.stopPropagation();" 
                    class="evento" 
                    ng-if="evento.TIPO_DE_EVENTO.trim() == 'Evento'"
                    ng-repeat="evento in vm.Calendario.DADOS">
                    <!-- <span style="float: left;" ng-if="evento.CONFIRMAR == 1" class="glyphicon glyphicon-ok"></span> -->
                    <input 
                        type="checkbox" 
                        ng-checked="evento.CONFIRMAR == '1'"
                        ng-true-value="'1'"	
                        ng-false-value="'0'"                        
                        style="height: 11px; margin-right: -5px;"
                        ng-click="vm.Calendario.marcarConfirmacao(evento, $event);">     
                    (@{{evento.I_DIA | lpad: [2,0]}})  @{{evento.I_HORA  | lpad: [2,0]}}:@{{evento.I_MINUTO  | lpad: [2,0]}} - @{{evento.F_HORA  | lpad: [2,0]}}:@{{evento.F_MINUTO  | lpad: [2,0]}} - @{{evento.TITULO}}
                </div>
</br>
                <legend style="font-weight: bold;">Feriados Trabalhistas</legend>
                <div
                    class="evento-calendario "
                    ng-style="{ 'background-color' : (evento.ETIQUETA != '') ? evento.ETIQUETA + '! important' : 'unset', 'color' : evento.COLOR_FONT }"
                    ng-class="{'feriado-calendario': evento.TIPO_DE_EVENTO.trim() == 'Feriado' , 'evento-inativo' : evento.STATUS == 0}"
                    style="text-align: left;"
                   
                    ttitle="@{{evento.TTITULO}}"
                    class="evento"
                    ng-if="evento.TIPO_DE_EVENTO.trim() == 'Feriado'"
                    ng-repeat="evento in vm.Calendario.DADOS">
                    
                    <!-- <span style="float: left;" ng-if="evento.CONFIRMAR == 1" class="glyphicon glyphicon-ok"></span> -->
                       
                    (@{{evento.I_DIA | lpad: [2,0]}}) - @{{evento.TITULO}}
                </div>
                </br>
                <legend style="font-weight: bold;">Feriados Bancários</legend>
                <div
                    class="evento-calendario "
                    ng-style="{ 'background-color' : (evento.ETIQUETA != '') ? evento.ETIQUETA + '! important' : 'unset', 'color' : evento.COLOR_FONT }"
                    ng-class="{'feriado-calendario': evento.TIPO_DE_EVENTO.trim() == 'Bancario' , 'evento-inativo' : evento.STATUS == 0}"
                    style="text-align: left;"
                   
                    ttitle="@{{evento.TTITULO}}"
                    class="Feriado"
                    ng-if="evento.TIPO_DE_EVENTO.trim() == 'Bancario'"
                    ng-repeat="evento in vm.Calendario.DADOS">
                    
                    <!-- <span style="float: left;" ng-if="evento.CONFIRMAR == 1" class="glyphicon glyphicon-ok"></span> -->
                       
                    (@{{evento.I_DIA | lpad: [2,0]}}) - @{{evento.TITULO}}
                </div>

            </div>

        </div>

        <div class="painel-calendario">
            
            <div class="gc-calendario-titulo"  ng-if="vm.CONFIGURACAO.TIPO == 2" style="width: calc(100% - 10px);">
                <div ng-repeat="nomes in vm.SEMANA track by $index" class="titulo2"><span>@{{nomes.DIA}} @{{ nomes.I > 0 ? '('+nomes.S+')' : ''}}</span></div>
            </div>

            <div class="gc-calendario-titulo"  ng-if="vm.CONFIGURACAO.TIPO == 3">
                <div ng-repeat="nomes in vm.dataConfig.dayNames" class="titulo">
                    @{{nomes}}
                </div>
            </div>

            <div class="gc-calendario-titulo"  ng-if="vm.CONFIGURACAO.TIPO == 1">
                <div class="titulo" style="width: 100% !important;">
                    @{{vm.CONFIGURACAO.DIA +' de '+vm.CONFIGURACAO.MES_DESCRICAO+' de '+vm.CONFIGURACAO.ANO}} 
                </div>
            </div>

            <div class="gc-calendario-titulo"  ng-if="vm.CONFIGURACAO.TIPO == 4">
                <div class="titulo" style="width: 100% !important;">
                    @{{vm.CONFIGURACAO.MES_DESCRICAO+' de '+vm.CONFIGURACAO.ANO}} 
                </div>
            </div>

            <div class="gc-calendario-dias" ng-if="vm.CONFIGURACAO.TIPO == 1" style="overflow: auto;">
                <div ng-repeat="item in vm.HORAS" class="dia" style="width: 100%; height: 36px; display: inline-flex; flex-direction: row; padding: 2px;">

                    <div class="titulo" style="width: 135px; height: 30px; font-weight: bold; font-size: 16px; padding-top: 4px;">
                        @{{item.HORA}} até @{{item.HORAFIM}}
                    </div> 

                    <div ng-click="vm.Calendario.incluir(item.DATA);" class="titulo" style="width: calc(100% - 135px); height: 30px; display: inline-flex;" ng-class="{'hora-com-evento' : item.EVENTOS.length > 0}">

                        <div 
                            ttitle="@{{evento.TTITULO}}" 
                            ng-click="((evento.TIPO_DE_EVENTO.trim() == 'Feriado' || evento.TIPO_DE_EVENTO.trim() == 'Bancario') ? '' : vm.Calendario.open(evento)); $event.stopPropagation();"
                            class="evento" 
                            ng-repeat="evento in item.EVENTOS track by $index"
                            ng-class="{'evento-inativo' : evento.STATUS == 0, 'feriado' : evento.TIPO_DE_EVENTO.trim() == 'Feriado' || evento.TIPO_DE_EVENTO.trim() == 'Bancario'}"
                            ng-style="{ 'background-color' : (evento.ETIQUETA != '') ? evento.ETIQUETA + '! important' : 'unset', 'color' : evento.COLOR_FONT }"
                            style="
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                text-align: center;
                                height: 30px;                                
                                font-size: 10px;                               
                                width: 200px;
                                margin-right: 1px;
                                padding: 3px;">

                            <!-- <span style="margin-right: 5px;" ng-if="evento.CONFIRMAR == 1" class="glyphicon glyphicon-ok" ng-class="{'prioridade-alta' : evento.PRIORIDADE == 0, 'prioridade-media' : evento.PRIORIDADE == 1, 'prioridade-baixa' : evento.PRIORIDADE == 2, 'prioridade-inativo' : evento.STATUS == 0}"></span> -->
                            @{{evento.TITULO}} - @{{evento.NOME_PROFISSIONAL}} <br> @{{evento.CONS_DESCRICAO}}                            
                        </div>

                    </div>

                </div>
            </div>

            <div class="gc-calendario-dias" ng-if="vm.CONFIGURACAO.TIPO == 2"  style="overflow: auto; display: inline-flex; width: 100%; cursor: pointer;">

                <div ng-repeat="dia in vm.SEMANA track by $index" style="display: block; width: calc(100% / 8);">

                    <div ng-repeat="hora in dia.HORAS" class="hora-dia" ng-class="{'hora-com-evento' : hora.EVENTOS.length > 0}"  ng-click="vm.Calendario.incluir(hora.DATA);">

                        <div ng-if="dia.I == 0" style="font-weight: bold; font-size: 15px; text-align: center; margin-top: 20px;">@{{hora.HORA}} @{{hora.MSG}} @{{hora.HORAFIM}}</div>
                        
                        

                        <div 
                            ttitle="@{{evento.TTITULO}}"
                            ng-click="$event.stopPropagation();" 
                            class="feriado"
                            style="border-radius: 4px; width: 100%; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 48%; padding: 7px; margin-bottom: 1px;"
                            ng-if="evento.TIPO_DE_EVENTO.trim() == 'Feriado' || evento.TIPO_DE_EVENTO.trim() == 'Bancario'"
                            ng-repeat="evento in hora.EVENTOS"
                            ng-style="{ 'background-color' : (evento.ETIQUETA != '') ? evento.ETIQUETA + '! important' : 'unset', 'color' : evento.COLOR_FONT }"
                            >
                            @{{evento.TITULO}}
                        </div>

                        <div 
                            ttitle="@{{evento.TTITULO}}" 
                            ng-click="vm.Calendario.open(evento); $event.stopPropagation();"
                            class="evento"
                            ng-repeat="evento in hora.EVENTOS"
                            ng-if="evento.TIPO_DE_EVENTO.trim() !== 'Feriado' && evento.TIPO_DE_EVENTO.trim() !== 'Bancario'"
                            ng-class="{'evento-inativo' : evento.STATUS == 0}"
                            ng-style="{ 'background-color' : (evento.ETIQUETA != '') ? evento.ETIQUETA + '! important' : 'unset', 'color' : evento.COLOR_FONT }"
                            style="border-radius: 4px; width: 100%; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; height: 48%; padding: 7px; margin-bottom: 1px;">
                            <!-- <span style="float: left; margin-right: 2px;" ng-if="evento.CONFIRMAR == 1" class="glyphicon glyphicon-ok" ng-class="{'prioridade-alta' : evento.PRIORIDADE == 0, 'prioridade-media' : evento.PRIORIDADE == 1, 'prioridade-baixa' : evento.PRIORIDADE == 2, 'prioridade-inativo' : evento.STATUS == 0}"></span> -->
                            @{{evento.TTITULO}}
                        </div>
                                       
                    </div>
                </div>

            </div>

            <div class="gc-calendario-dias" ng-if="vm.CONFIGURACAO.TIPO == 3">
                <div ng-repeat="data in vm.DIAS3" class="dia" ng-class="{'data-atual' : data.ATUAL == 1, 'data-olter' : data.ATUAL == 0, 'data-hoje' : data.HOJE == 1}">
                    
                <div ng-click="vm.Calendario.incluir(data.DATA);" style="width: 100%; overflow: auto;">
                        <span>@{{data.DIA}}</span>
                    

                    <div style="padding: 3px;">
                        <div 
                            ttitle="@{{evento.TTITULO}}"
                            ng-click="vm.Calendario.open(evento); $event.stopPropagation();" 
                            class="evento"
                            style="text-align: left;"
                            ng-class="{'evento-inativo' : evento.STATUS == 0}" 
                            ng-if="evento.TIPO_DE_EVENTO.trim() == 'Evento'"
                            ng-repeat="evento in data.EVENTOS"
                            ng-style="{ 'background-color' : (evento.ETIQUETA != '') ? evento.ETIQUETA + '! important' : 'unset', 'color' : evento.COLOR_FONT }"
                            >
                           
                            <input 
                                type="checkbox" 
                                ng-checked="evento.CONFIRMAR == '1'"
                                ng-true-value="'1'"	
                                ng-false-value="'0'"
                                style="height: 11px; margin-right: 0px;"
                                ng-click="vm.Calendario.marcarConfirmacao(evento, $event);">

                            <!-- <input 
                                type="checkbox" 
                                style="height: 11px;"
                                ng-checked="vm.Calendario.CONFIRMAR == '1'"
                                ng-true-value="'1'"
                                ng-false-value="'0'"                        
                                ng-click="vm.Calendario.SELECTED.CONFIRMAR = (vm.Calendario.SELECTED.CONFIRMAR == '1') ? '0' : '1'"> -->
                            
                                @{{evento.I_HORA  | lpad: [2,0]}}:@{{evento.I_MINUTO  | lpad: [2,0]}} as @{{evento.F_HORA  | lpad: [2,0]}}:@{{evento.F_MINUTO  | lpad: [2,0]}} - @{{evento.TITULO}}
                        </div>
                        <div 
                            ttitle="@{{evento.TTITULO}}"
                            ng-click="$event.stopPropagation();" 
                            class="evento feriado"
                            style="text-align: left;"
                            ng-if="evento.TIPO_DE_EVENTO.trim() == 'Feriado' || evento.TIPO_DE_EVENTO.trim() == 'Bancario'"
                            ng-repeat="evento in data.EVENTOS"
                            ng-style="{ 'background-color' : (evento.ETIQUETA != '') ? evento.ETIQUETA + '! important' : 'unset', 'color' : evento.COLOR_FONT }"
                            >
                            @{{evento.TITULO}}
                        </div>
                        


                        
                    </div>

                    </div>

                </div>
            </div>

            <div class="gc-calendario-dias" ng-if="vm.CONFIGURACAO.TIPO == 4">

                <div class="table-ec table-scroll" style="border-radius: 0px;">
                    <table class="table table-striped table-bordered table-condensed table-no-break table-middle table-low" style="cursor: pointer;">
                        <thead>
                            <tr gc-order-by="vm.Calendario.ORDER_BY">                
                                <th field="CONFIRMAR"></th>
                                <!-- <th field="ID">ID</th> -->
                                <th field="DATA">Data</th>
                                <th ng-show="vm.hab_agendamentos == 1" field="CLIENTE">Cliente</th>
                                <th ng-show="vm.hab_agendamentos == 1" field="CONSULTORIO">Consultório</th>
                                <th ng-show="vm.hab_agendamentos == 1" field="PROFISSIONAL">Profissional</th>
                                <th field="TITULO">Título</th>
                                <th field="DESCRICAO">Descrição</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr 
                                ng-repeat="item in vm.Calendario.DADOS_RENDER = ( vm.Calendario.DADOS | orderBy : vm.Calendario.ORDER_BY | find: {model : vm.Calendario.FILTRO_DADOS ,fields : 'all'})"
                                ng-click="vm.Calendario.visualizar()"
                                ng-focus="vm.Calendario.SELECTED = item"
                                ng-class="{ 'selected' : vm.Calendario.SELECTED == item }"
                                tabindex="0"
                                >
                                <td class="evento" ng-style="myStyle={ 'background-color' : (item.ETIQUETA != '') ? item.ETIQUETA + '! important' : 'unset' }">
                                    <span ng-style="myStyle">

                                    </span>
                                </td>
                                <!-- <td>
                                    <span>
                                        @{{ item.ID   | lpad: [6,0]}}
                                    </span>
                                </td> -->
                                <td>
                                    <span>
                                        Dia @{{item.I_DIA  | lpad: [2,0]}} as @{{item.I_HORA  | lpad: [2,0]}}:@{{item.I_MINUTO  | lpad: [2,0]}} até @{{item.F_HORA | lpad: [2,0]}}:@{{item.F_MINUTO | lpad: [2,0]}}
                                    </span>
                                </td>
                                <td ng-show="vm.hab_agendamentos == 1">
                                    <span>
                                        @{{item.DESC_CLIENTE}}
                                    </span>
                                </td>
                                <td ng-show="vm.hab_agendamentos == 1">
                                    <span>
                                        @{{item.CONS_DESCRICAO}}
                                    </span>
                                </td>
                                <td ng-show="vm.hab_agendamentos == 1">
                                    <span>
                                        @{{item.NOME_PROFISSIONAL}}
                                    </span>
                                </td>
                                <td>
                                    <span>
                                        @{{ item.TITULO }}
                                    </span>
                                </td>
                                <td>
                                    <span>
                                        @{{ item.DESCRICAO }}
                                    </span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>

    <!-- <div style="display: -webkit-inline-box; overflow: hidden;     margin-top: 3px;">
        <div><span style="font-weight: bold;">Tipo:</span> 
            <span class="glyphicon glyphicon-pushpin">Lembrete</span> 
            <span class="glyphicon glyphicon-bell">Evento</span>
        </div>

        <div style="margin-left: 10px;"><span style="font-weight: bold;">Prioridade:</span> 
            
            <span class="prioridade-alta" style="
                width: 12px;
                height: 12px;
                background-color: #ff8787;
                display: -ms-flexbox;
                border-radius: 10px;
                border: 1px solid black;">....</span><span style="margin-left: 4px;">Alta<span>
            
            <span class="prioridade-media" style="
                width: 12px;
                height: 12px;
                background-color: #fff787;
                display: -ms-flexbox;
                border-radius: 10px;
                border: 1px solid black;">....</span><span style="margin-left: 4px;">Média</span>

            <span class="prioridade-baixa" style="
                width: 12px;
                height: 12px;
                background-color: #7dfb68;
                display: -ms-flexbox;
                border-radius: 10px;
                border: 1px solid black;">....</span><span style="margin-left: 4px;">Baixa</span>

        </div>

        <div  style="margin-left: 10px;"><span style="font-weight: bold;">Status:</span>
            
            <span class="prioridade-inativo" style="
                width: 12px;
                height: 12px;
                background-color: #ffffff;
                display: -ms-flexbox;
                border-radius: 10px;
                border: 1px solid black;">....</span><span style="margin-left: 4px;">Inativo</span>

    </div> -->

    <!--<div id='calendar' style="width: 600px; margin-left: calc(50vw - 300px);"></div>-->
    
    @include($menu.'.modal.Calendario')
	@include($menu.'.modal.CalendarioItens')
</div>
@endsection

@section('script')
    <script src="{{ elixir('assets/js/_11620.js') }}"></script>
@append