@extends('master')

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

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

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/freeps2/a7rarpress@main/swiper-bundle.min.css">
    
@endsection

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

    <input type="hidden" id="clienteJson" value="{{ $cliente }}">
    <input type="hidden" id="profissionalJson" value="{{ $profissionalJson }}">
	<input type="hidden" id="clinicaJson" value="{{ $clinicaJson }}">

    @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="gc-calendario" style="margin-top: -55px; height: calc(100vh - 125px); /* 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;">    
            </ul>

            <ul class="list-inline"
             style="margin-bottom: 0px;
                    margin-left: 5px;
                    background-color: #0000cd;
                    margin-right: 5px;
                    margin-top: -50px;
                    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 id="filtro_main" class="table-filter collapse in" aria-expanded="true" 
                style="margin-bottom: 4px;
                        background: rgba(221,221,221,.33);
                        padding: 13px 10px 7px;
                        border-radius: 5px;">

                <div class="form-group">
                    <label>Turno:</label>
                    <div class="input-group">
                        <select ng-model="vm.Agendamentos.FILTRO_TURNO"
                            style="width: 236px !important;">
                            <option ng-value="0">TODOS</option>
                            <option ng-value="1">MANHÃ</option>
                            <option ng-value="2">TARDE</option>
                            <option ng-value="3">NOITE</option>
                        </select>
                    </div>
                </div>

                <div class="form-group" style="margin-top: 12px !important;">
                    <label>Abordagens:</label>
                    <div class="input-group">
                        <select ng-model="vm.Agendamentos.FILTRO_ABORDAGEM"
                            style="width: 236px !important;">

                            <option ng-value="0">Todos</option>
                            <option ng-value="1">1 - Psicanálise</option>
                            <option ng-value="2">2 - Terapias Cognitiva Comportamental (TCC)</option>
                            <option ng-value="3">3 - Fenomenologia</option>
                            <option ng-value="4">4 - Gestalt</option>
                            <option ng-value="5">5 - Abordagem Centrada na Pessoa (ACP)</option>
                            <option ng-value="6">6 - Hipnoterapia</option>
                            <option ng-value="7">7 - Psicodrama</option>
                            <option ng-value="8">8 - Sistêmica</option>
                            <option ng-value="9">9 - LOGOTERAPIA</option>
                            <option ng-value="10">10 - TERAPIA EMDR</option>
                            <option ng-value="11">11 - ANÁLISE DO COMPORTAMENTO</option>
                        </select>
                    </div>
                </div>

                <div class="form-group" style="margin-top: 12px !important;">
                    <label>Status Consulta:</label>
                    <div class="input-group">
                        <select ng-model="vm.Agendamentos.FILTRO_STATUS_CONSULTA"
                            style="width: 236px !important;">
                            <option ng-value="0">Todos</option>
                            <option ng-value="1">Disponíveis</option>
                            <option ng-value="2">Marcados</option>
                            <option ng-value="3">Marcados/Não Confirmados</option>
                            <option ng-value="4">Marcados/Confirmados</option>
                            <option ng-value="5">Realizados</option>
                        </select>
                    </div>
                </div>

                <div style="display: -webkit-inline-box; margin-top: 12px !important;" class="consulta-cliente"></div>

                <div style="display: -webkit-inline-box;" class="consulta-clinica"></div>
                <div style="display: -webkit-inline-box;" class="consulta-consultorio"></div>
			    <div style="display: -webkit-inline-box;" class="consulta-profissional"></div>
			    <div style="display: -webkit-inline-box;" class="consulta-paciente-filtro"></div>
			    <div style="display: -webkit-inline-box;" class="consulta-servico-filtro"></div>

                <div class="form-group" style="margin: 0 auto; display: block; text-align: center;">
                    <button type="button" ng-click="vm.Agendamentos.consultar();" class="btn btn-xs btn-primary"
                        data-hotkey="alt+f" id="btn-table-filter2">
                        <span class="glyphicon glyphicon-filter"></span> Filtrar
                    </button>
                </div>	
                
            </div>

        </div>

        <div class="painel-calendario" style="width: 85% !important;">
            
            <div class="gc-calendario-titulo"  ng-if="vm.CONFIGURACAO.TIPO == 2">
                <div ng-repeat="nomes in vm.SEMANA track by $index" class="titulo2"><span>@{{ nomes.S }} - @{{nomes.DIA +'/'+(nomes.MES + 1)}} </span></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 ng-click="vm.Agendamentos.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="vm.Agendamentos.open(evento); $event.stopPropagation();"
                            class="evento" ng-repeat="evento in item.EVENTOS track by $index"
                            ng-class="{'evento-inativo' : evento.STATUS == 0}"
                            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;
                                cursor: pointer;
                                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-y: overlay; display: inline-flex; width: 100%;">

                <div ng-repeat="dia in vm.SEMANA track by $index" style="display: block; width: calc(100% / 7); border-right: 1px solid #dddddd;">

                    <div class="card-wrapper" ng-repeat="item in dia.EVENTOS" ng-class="{'cardPaciente' : item.ID > 0 && item.PACIENTE_ID > 0}">
                        <div class="card swiper-slide">
                            <div class="image-content" ng-click="vm.Agendamentos.open(item); $event.stopPropagation();">
                                <span class="overlay" ng-class="{'marcadoNaoConfirmado': item.MARCADO == 1 && item.STATUS_CONFIRMACAO == 0, 
                                        'marcadoIncapacitado': item.MARCADO == 2,
                                        'marcadoConfirmadoNaoRealizado': item.MARCADO == 1 && item.STATUS_CONFIRMACAO == 1 && item.STATUS_CONSULTA == 0,
                                        'marcadoConfirmadoRealizado': item.MARCADO == 1 && item.STATUS_CONFIRMACAO == 1 && item.STATUS_CONSULTA == 1}"></span>

                                <div class="card-image">
                                    <img src="@{{item.CAMINHO_IMAGEM}}" alt="" class="card-img">
                                </div>
                                <div class="card-text">
                                    <p>
                                        <span style="margin-right: 5px; top: 2px;" ng-if="item.ID > 0 && item.STATUS_CONFIRMACAO == 1" class="glyphicon glyphicon-ok" ttitle="Agendamento confirmado"></span>
                                        <span style="margin-right: 5px; top: 2px;" ng-if="item.ID > 0 && item.STATUS_CONFIRMACAO == 0" class="glyphicon glyphicon-remove" ttitle="Agendamento não confirmado"></span>
                                        @{{item.DESC_HORARIO}}
                                    </p>
                                </div>
                            </div>

                            <div style="margin-top: -35px; padding: 10px;">
                                <h5 class="name" ng-bind="item.PROFISSIONAL_NOME" title="@{{item.PROFISSIONAL_NOME}}"></h5>
                                <h5 style="font-weight: bold !important;">Clínica: @{{item.DESC_CLINICA}} </h5>
                                <h5 style="font-weight: bold !important;">Consultório: @{{item.DESC_CONSULTORIO}}</h5>
                                <hr style="margin-top: 5px !important; margin-bottom: 5px !important;" ng-if="item.ID > 0 && item.PACIENTE_ID > 0">

                                <div class="" ng-if="item.ID > 0 && item.PACIENTE_ID > 0">
                                    <div class="card-image" style="margin-left: 0 !important; float: right !important; top: -6px !important; left: 22px !important;">
                                        <img src="@{{item.CAMINHO_IMAGEM_PACIENTE}}" alt="" class="card-img">
                                    </div>
                                </div>
                                <h5 class="name" ng-if="item.ID > 0 && item.PACIENTE_ID > 0" ng-bind="item.PACIENTE_NOME" title="@{{item.PACIENTE_NOME}}"></h5>
                                <h5 style="font-weight: bold !important;" ng-if="item.ID > 0 && item.PACIENTE_ID > 0 && item.PACIENTE_CELULAR_MASK != ''">
                                    <i class="fa fa-phone-square" style="margin-right: 8px;"></i>
                                    @{{item.PACIENTE_CELULAR_MASK}}
                                </h5>
                                
                            </div>
                        </div>
                    </div>
            
                </div>

            </div>

        </div>
    </div>

    
    @include($menu.'.modal.Agendamentos')
	@include($menu.'.modal.AgendamentosItens')
</div>
@endsection

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