@extends('helper.include.view.modal', ['id' => 'modal-Ocorrencia', 'class_size' => 'modal-lg'])

@section('modal-start')
    <form class="form-inline" ng-submit="vm.Ocorrencia.gravar()">
@overwrite

@section('modal-header-left')

<h4 class="modal-title">
	<span ng-if="!vm.Ocorrencia.ALTERANDO" 	>{{ Lang::get('chamados/_26110.titulo-exibir' ) }}</span>
	<span ng-if="vm.Ocorrencia.INCLUINDO"  	>{{ Lang::get('chamados/_26110.titulo-incluir') }}</span>
	<span ng-if="vm.Ocorrencia.ALTERANDO && vm.Ocorrencia.SELECTED.ID > 0" >{{ Lang::get('chamados/_26110.titulo-alterar') }}</span>	
</h4>

@overwrite

@section('modal-header-right')

	<button ng-if="vm.Ocorrencia.ALTERANDO" type="submit" class="btn btn-success" data-hotkey="f1">
        <span class="glyphicon glyphicon-ok"></span> Gravar
    </button>
	
	<button ng-if="vm.Ocorrencia.ALTERANDO" ng-click="vm.Ocorrencia.cancelar()" type="button" class="btn btn-danger btn-cancelar" data-hotkey="esc">
        <span class="glyphicon glyphicon-ban-circle"></span> Cancelar
    </button>
    
    <button ng-disabled="{{ userMenu($menu)->ALTERAR }} == 0 || vm.Ocorrencia.SELECTED.FECHADO == 1" ng-if="!vm.Ocorrencia.ALTERANDO" ng-click="vm.Ocorrencia.Finalizar()" type="button" class="btn btn-warning " data-hotkey="f10">
        <span class="glyphicon glyphicon-saved"></span> Finalizar
    </button>   

	<button ng-disabled="{{ userMenu($menu)->ALTERAR }}  == 0" ng-if="!vm.Ocorrencia.ALTERANDO" ng-click="vm.Ocorrencia.alterar()" type="button" class="btn btn-primary" data-hotkey="f9">
        <span class="glyphicon glyphicon-edit"></span> Alterar
    </button>   
	<!--
	<button ng-disabled="{{ userMenu($menu)->EXCLUIR }} == 0"  ng-if="!vm.Ocorrencia.ALTERANDO" ng-click="vm.Ocorrencia.excluir()" type="button" class="btn btn-danger" data-hotkey="f12">
        <span class="glyphicon glyphicon-trash"></span> Excluir
    </button>
    -->	
	<button ng-if="!vm.Ocorrencia.ALTERANDO" data-consulta-historico data-tabela="TBOCORRENCIA_WEB" data-tabela-id="@{{ vm.Ocorrencia.SELECTED.ID }}" type="button" class="btn gerar-historico" data-hotkey="alt+h">
        <span class="glyphicon glyphicon-time"></span> {{ Lang::get('master.historico') }}
    </button>
	
	<button ng-if="!vm.Ocorrencia.ALTERANDO" type="button" class="btn btn-default btn-fechar-modal btn-voltar" ng-click="vm.Ocorrencia.fecharModal()" data-hotkey="esc">
      <span class="glyphicon glyphicon-chevron-left"></span> Voltar
    </button>	

@overwrite

@section('modal-body')
<div style="height: calc(100vh - 230px);">

    <ul id="tab" class="nav nav-tabs" role="tablist"> 
		<li role="presentation" class="active tab-detalhamento">
			<a href="#tab1-container" id="tab1-tab" role="tab" data-toggle="tab" aria-controls="tab1-container" aria-expanded="true">
                Ocorrência
                <span class="btn btn-xs btn-default glyphicon glyphicon-refresh"></span>
			</a>
		</li>

		<li role="presentation" class="tab-detalhamento" ng-show="!vm.Ocorrencia.ALTERANDO">
			<a href="#tab2-container" id="tab2-tab" role="tab" data-toggle="tab" aria-controls="tab2-container" aria-expanded="false">
				Feed
				<span class="btn btn-xs btn-default glyphicon glyphicon-refresh"  ng-click="vm.Ocorrencia.getFeeds()"></span>
			</a>
		</li>

		<li role="presentation" class="tab-detalhamento" ng-show="!vm.Ocorrencia.ALTERANDO">
			<a href="#tab3-container" id="tab2-tab" role="tab" data-toggle="tab" aria-controls="tab3-container" aria-expanded="false">
				Envolvidos
				<span class="btn btn-xs btn-default glyphicon glyphicon-refresh"  ng-click="vm.Ocorrencia.getEnvolvidos()"></span>
			</a>
        </li>
        
        <li role="presentation" class="tab-detalhamento" ng-show="vm.Ocorrencia.INCLUINDO == true">
			<a href="#tab4-container" id="tab4-tab" role="tab" data-toggle="tab" aria-controls="tab4-container" aria-expanded="false">
				Envolvidos
				<span class="btn btn-xs btn-default glyphicon glyphicon-refresh"></span>
			</a>
		</li>
	</ul>

    <div id="tab-content" class="tab-content"  style="height: 94%;">
		<div role="tabpanel" class="tab-pane fade active in" id="tab1-container" aria-labelledby="tab1-tab" style="height: 94%; border: 0px !important;">
            
            <div class="form-group">
                <label>ID:</label>
                <input 
                    type="text"
                    class="form-control input-menor"
                    ng-model="vm.Ocorrencia.SELECTED.ID"
                    readonly="readonly">
            </div>
            
            <div class="form-group">
                <label>Assunto:</label>
                <input 
                    type="text"
                    class="form-control input-medio" 
                    required
                    ng-model="vm.Ocorrencia.SELECTED.ASSUNTO"
                    ng-readonly="!vm.Ocorrencia.ALTERANDO"
                    form-validate="true">
            </div>

            <div style="display: -webkit-inline-box;" class="consulta-filtro-status2"></div>

            <div style="display: -webkit-inline-box;" class="consulta-vinculo"></div>

            <div style="display: -webkit-inline-box;" class="consulta-filtro-motivo2"></div>

            <div class="form-group" style="width: 100%; height: 250px;">
                <label>Descrição:</label>
                <textarea 
                    style="width: 100%; height: 100%;"
                    name=""
                    ng-model="vm.Ocorrencia.SELECTED.DESCRICAO"
                    class="form-control normal-case"
                    rows="5"
                    cols="70"
                    required
                    ng-readonly="!vm.Ocorrencia.ALTERANDO">
                </textarea>
            </div>
                
        </div>

		<div role="tabpanel" class="tab-pane fade" id="tab2-container" aria-labelledby="tab2-tab" style="height: 94%; border: 0px !important;">

            <button 
                type="button" 
                class="btn btn-sm btn-success" 
                ng-click="vm.Ocorrencia.feedEmail(0)"
                ng-disabled="vm.Ocorrencia.SELECTED.FECHADO == 1" >
                <span class="glyphicon glyphicon-plus"></span>
                Email
            </button>

            <button 
                type="button" 
                class="btn btn-sm btn-success" 
                ng-click="vm.Ocorrencia.feedEmail(1)"
                ng-disabled="vm.Ocorrencia.SELECTED.FECHADO == 1" >
                <span class="glyphicon glyphicon-plus"></span>
                Feed
            </button>

            <div class="pesquisa-obj-container2" style="margin-top: 5px;">
                <div class="input-group input-group-filtro-obj">
                    <input type="search" ng-model="vm.Ocorrencia.FILTRO_FEED" name="filtro_obj" class="form-control pesquisa filtro-obj" placeholder="Pesquise..." autocomplete="off" autofocus="">
                    <button type="button" class="input-group-addon btn-filtro btn-filtro-obj btn-pesquisar">
                        <span class="fa fa-search"></span>
                    </button>
                </div>
            </div>

            <div class="conteiner-feed">

            <div style="
                    background-color: #f5f5f5;
                    border-radius: 10px;
                    color: black;
                    padding: 10px;
                    border: 1px solid #cacaca;
                    max-height: 150px;
                    overflow: auto;">
                    <span style="font-weight: bold;">Assunto:</span> @{{vm.Ocorrencia.SELECTED.ASSUNTO}}<br>
                    <span style="font-weight: bold;">Motivo:</span> @{{vm.Ocorrencia.SELECTED.MOTIVO_DESCRICAO}}<br>
                    <span style="font-weight: bold;">Descrição:</span> @{{vm.Ocorrencia.SELECTED.DESCRICAO}}
                </div>

                <div class="feed-caso feed-caso@{{feed.ID}}" ng-repeat="feed in vm.Ocorrencia.DADOS_FEEDS | filter: vm.Ocorrencia.FILTRO_FEED | orderBy: '-ID'">
                    
                    <div class="foto semfoto" style="background-image: url(/fotos/colaborador/@{{feed.COLABORADOR_ID}})">

                    </div>

                    <div  class="corpo">

                        <div class="de" ng-if="feed.USUARIO_ID > 0 && feed.USER_STATUS == '0'" >@{{feed.DE}}</div>
                        <div class="de" ng-if="feed.USUARIO_ID > 0 && feed.USER_STATUS == '1'" >@{{feed.USER_NAME}}</div>
                        <div class="de" ng-if="feed.USUARIO_ID == 0" >@{{feed.USER_NAME}}</div>
                        <div class="de" ng-if="feed.USUARIO_ID == -1" >@{{feed.DE}}</div>

                        <div class="email-para" ng-if="(feed.PARA != feed.DE && feed.PARA != '') || (feed.EM_COPIA != feed.DE && feed.EM_COPIA != '') || (feed.EM_COPIA_OCULTA != feed.DE && feed.EM_COPIA_OCULTA != '')">
                            para :@{{(feed.EM_COPIA_OCULTA+', '+feed.EM_COPIA+', '+feed.PARA + '').replace(";", ",").replace(", ,", ",").replace(",,", ",").replace(";", ",").replace(", ,", ",").replace(",,", ",").replace(";", ",").replace(", ,", ",").replace(",,", ",").replace(";", ",").replace(", ,", ",").replace(",,", ",")}}
                        </div>
                        
                        <div class="tipo tipo@{{feed.ORIGEM}}"></div>

                        <div ng-click="vm.Ocorrencia.modalFeed(feed)" title="Expandir" class="feebtn_modal"><span class="glyphicon glyphicon-fullscreen"></span></div>
                        <div ng-click="vm.Ocorrencia.modalFeed(feed)" title="Fechar" class="fecharfeebtn_modal"><span class="glyphicon glyphicon-remove"></span></div>

                        <div ng-bind-html="vm.Ocorrencia.trustAsHtml(feed.MENSAGEM)" class=" mensagem mensagem-html-container"></div>

                    </div>

                    <div class="buttons2">
                        
                        <button 
                            type="button" 
                            class="btn btn-sm btn-primary" 
                            ng-click="vm.Ocorrencia.editarFeed(feed)"
                            ng-disabled="vm.Ocorrencia.SELECTED.FECHADO == 1 || vm.USER.ID != feed.USUARIO_ID" 
                            >
                            <span class="glyphicon glyphicon-pencil"></span>
                            Editar
                        </button>

                        <div class="data">@{{feed.DATA_REGISTRO}}</div>
                    </div>  

                </div>
            </div>

        </div>

        <div role="tabpanel" class="tab-pane fade" id="tab3-container" aria-labelledby="tab3-tab" style="height: 94%; border: 0px !important;">
        
            <button 
                type="button" 
                class="btn btn-sm btn-primary " 
                ng-click="vm.OcorrenciaItens.incluir()"
                ng-disabled="vm.Ocorrencia.SELECTED.FECHADO == 1" >
                <span class="glyphicon glyphicon-plus"></span>
                Incluir
            </button>

            <div class="tabela_secundaria" id="tabela_secundaria"></div>

        </div>

        <div role="tabpanel" class="tab-pane fade" id="tab4-container" aria-labelledby="tab4-tab" style="height: 94%; border: 0px !important;">
        
            <div style="display: -webkit-inline-box; width: 100%;" class="consulta-usuario2"></div>

            <div class="tabela_secundaria4" id="tabela_secundaria4"></div>

        </div>
    </div>
	
</div>
</form>

@overwrite