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

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

@section('modal-header-left')

	<h4 class="modal-title">
		<span ng-if="!vm.Caixa.ALTERANDO">{{ Lang::get('financeiro/_20300.titulo-exibir') }}</span>
		<span ng-if="vm.Caixa.INCLUINDO">{{ Lang::get('financeiro/_20300.titulo-incluir') }}</span>
		<span ng-if="vm.Caixa.ALTERANDO == true && vm.Caixa.INCLUINDO == false">{{ Lang::get('financeiro/_20300.titulo-alterar') }}</span>	
	</h4>

@overwrite

@section('modal-header-right')
<!-- 
	<button ng-disabled="{{ userMenu($menu)->ALTERAR }} == 0" ng-if="!vm.Caixa.ALTERANDO && (vm.Caixa.SELECTED.CONCILIACAO == '' || vm.Caixa.SELECTED.CONCILIACAO == '0')" ng-dblclick="vm.Caixa.conciliar(1)" type="button" class="btn btn-danger">
		<span class="glyphicon glyphicon-ok"></span> Conciliar
	</button>  
	
	<button ng-disabled="{{ userMenu($menu)->ALTERAR }} == 0" ng-if="!vm.Caixa.ALTERANDO && vm.Caixa.SELECTED.CONCILIACAO == '1'" ng-dblclick="vm.Caixa.conciliar(0);" type="button" class="btn btn-primary">
		<span class="glyphicon glyphicon-remove"></span> Desconciliar
	</button>   -->

	<div tabindex="0" class="form-group" ng-keypress="vm.Caixa.conciliar($event);" ng-click="vm.Caixa.conciliar();" ng-if="!vm.Caixa.INCLUINDO && vm.LINK == 0"
		style="display: inline-flex; border: 1px solid #cccccc; border-radius: 18px; margin-top: 3px; cursor: pointer; background-color: white;">
		<label class="conc_switch">
			<input type="checkbox" disabled class="no_selection" ng-checked="vm.Caixa.SELECTED.CONCILIACAO == '1' || vm.Caixa.SELECTED.CONCILIACAO == '2'">
			<span ng-class="{ 'forced' : vm.Caixa.SELECTED.CONCILIACAO == '2' }" class="slider round"></span>		
		</label>
		<label style="margin-top: 7px; margin-left: 9px; margin-right: 8px; cursor: pointer;" ng-if="vm.Caixa.SELECTED.CONCILIACAO == '1'"> Conciliado </label>
		<label style="margin-top: 7px; margin-left: 9px; margin-right: 8px; cursor: pointer;" ng-if="vm.Caixa.SELECTED.CONCILIACAO == '2'"> Conciliado </label>
		<label style="margin-top: 7px; margin-left: 9px; margin-right: 8px; cursor: pointer;" ng-if="vm.Caixa.SELECTED.CONCILIACAO == '' || vm.Caixa.SELECTED.CONCILIACAO == '0'"> Não Conciliado </label>
	</div>

	<button style="height: 31px;" ng-click="vm.Caixa.Anterior()" ng-if="!vm.Caixa.ALTERANDO" type="button" class="btn btn-default">
		<span class="glyphicon glyphicon-chevron-left"></span>
	</button>

	<button style="height: 31px;" ng-click="vm.Caixa.Avanco()" ng-if="!vm.Caixa.ALTERANDO" type="button" class="btn btn-default">
		<span class="glyphicon glyphicon-chevron-right"></span>
	</button>

	<button ng-if="vm.Caixa.ALTERANDO" type="submit" class="btn btn-success" data-hotkey="f1">
        <span class="glyphicon glyphicon-ok"></span> Gravar
    </button>
	
	<button ng-if="vm.Caixa.ALTERANDO" ng-click="vm.Caixa.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" ng-if="!vm.Caixa.ALTERANDO" ng-click="vm.Caixa.replicar()" type="button" class="btn btn-primary" data-hotkey="f8">
        <span class="fa fa-files-o"></span> Incluir Novo Lançamento
    </button> 
	
	<button ng-disabled="{{ userMenu($menu)->ALTERAR }} == 0 || vm.Caixa.SELECTED.PDV_ADIANTAMENTO_ID > 0" ng-if="!vm.Caixa.ALTERANDO" ng-click="vm.Caixa.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 || vm.Caixa.SELECTED.DEVOLUCAO_CHEQUE > 0 || vm.Caixa.SELECTED.BAIXA_CHEQUE_SEM_PARCELA > 0 || vm.Caixa.SELECTED.ADIANTAMENTO_CHEQUE == '1' || vm.Caixa.SELECTED.PDV_ADIANTAMENTO_ID > 0"  ng-if="!vm.Caixa.ALTERANDO" ng-click="vm.Caixa.excluir()" type="button" class="btn btn-danger" data-hotkey="f12">
        <span class="glyphicon glyphicon-trash"></span> Excluir
    </button>
	
	<button ng-if="!vm.Caixa.ALTERANDO" data-consulta-historico data-tabela="TBCAIXABANCO_LANCAMENTO" data-tabela-id="@{{ vm.Caixa.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.Caixa.ALTERANDO" data-consulta-arquivos data-tabela="TBCAIXABANCO_LANCAMENTO" data-tabela-id="@{{ vm.Caixa.SELECTED.ID }}" type="button" class="btn  btn-info" data-hotkey="alt+a">
        <span class="glyphicon glyphicon-file"></span> {{ Lang::get('master.arquivos') }}
    </button>
	
	<button ng-if="!vm.Caixa.ALTERANDO" type="button" class="btn btn-default btn-fechar-modal btn-voltar" ng-click="vm.Caixa.fecharModal()" data-hotkey="esc">
        <span class="glyphicon glyphicon-chevron-left"></span> Voltar
    </button>

@overwrite

@section('modal-body')
<div style="height: calc(100vh - 160px);">
    <div class="row">
	
		<div class="form-group" ng-if="!vm.Caixa.INCLUINDO">
            <label>ID:</label>
            <input type="text" class="form-control input-menor"
				ng-model="vm.Caixa.SELECTED.ID" readonly="readonly">
		</div>
		
		<div style="display: -webkit-inline-box;" class="consulta-estabelecimento2"></div>
		<div style="display: -webkit-inline-box;" class="consulta-banco2"></div>

		<div class="form-group" ng-if="vm.CONTA_CONTABIL && (vm.ControleIntegracaoContab == 1 || vm.ControleOrcamentario == 1)">
            <label>Conta Contábil: <a tabindex="-1" href="{{ url('') }}/_17151" target="_blank" rel="noopener noreferrer"><span class="fa fa-external-link" title="17151 - Cadastro de contas contábeis"></span></a></label>
            <input 
                type="text"
                class="form-control input-maior" 
                required
                ng-model="vm.Caixa.SELECTED.FCCONTABIL"
                ng-readonly="true">
		</div>

		<div class="form-group">
            <label>Data:</label>            
			<input style="width: 155px;" type="date" class="form-control data_lanc13" required 
				ng-atalho ng-model="vm.Caixa.SELECTED.DATA_LANCAMENTO" ng-change="vm.AjustarCompetencia(2);" 
				ng-disabled="!vm.Caixa.ALTERANDO">
		</div>	
		
		<div class="form-group" ng-if="vm.COMPETENCIA">
			<label>Competência:</label>
			<div id="div_data_competencia" style="display: inline-flex; overflow: hidden; border: 1px solid rgb(206, 206, 206); border-radius: 4px;">
				<div style="overflow: hidden; width: 12px; background-color: @{{ vm.Caixa.ALTERANDO != true ? 'rgb(245, 245, 245)' : 'rgb(255, 255, 255)'}};
					z-index: 999;border-top: 1px solid rgb(206, 206, 206);border-bottom: 1px solid rgb(206, 206, 206); height: 38px; margin-bottom: -3px; margin-top: -3px;"></div>
				<input style="margin-left: -34px; border: 1px !important;" id="date" type="date" class="form-control input-medio" ng-readonly="!vm.Caixa.ALTERANDO"
					ng-model="vm.Caixa.SELECTED.DATA_COMPETENCIA" onfocus="document.getElementById('div_data_competencia').style.border = '1px solid rgb(102, 175 ,233)'"
					onfocusout="document.getElementById('div_data_competencia').style.border = '1px solid rgb(206, 206, 206)'">
			</div>
		</div>
		
		<div tabindex="0" ng-keypress="vm.Caixa.change_natureza($event);" class="form-group" ng-click="vm.Caixa.change_natureza();" style="display: inline-flex; border: 1px solid #cccccc; border-radius: 18px; margin-top: 23px; cursor: pointer; background-color: white;">
			<label class="conc_switch">
				<input type="checkbox" disabled class="no_selection" ng-checked="vm.Caixa.SELECTED.NATUREZA == 'D'">
				<span class="slider round">
					<label ng-if="vm.Caixa.SELECTED.NATUREZA == 'D'" style="margin-left: 10px; margin-top: 4px; color: white; font-size: 14pt;">E</label>
					<label ng-if="vm.Caixa.SELECTED.NATUREZA == 'C'" style="margin-left: 35px; margin-top: 4px; font-size: 14pt; color: white;">S</label>
				</span>		
			</label>			
			<label style="margin-top: 7px; margin-left: 9px; margin-right: 8px; cursor: pointer;"> Natureza </label>
		</div>

		<div style="display: -webkit-inline-box;" ng-show="vm.CCUSTO" class="consulta-ccusto2"></div>		
<!-- 
		<div class="form-group">
			<label ttitle="Tipo Operação/Natureza Contábil">Tipo/Natureza:</label>
			<div class="input-group">
				<select 
					style="width: 194px;"
					name="repeatSelect"
					id="repeatSelect"
					required
					ng-model="vm.Caixa.SELECTED.NATUREZA"
					ng-readonly="!vm.Caixa.ALTERANDO"
					ng-disabled="!vm.Caixa.ALTERANDO">
					<option ng-repeat="item in vm.Caixa.ListaNatureza" ng-value="item.NATUREZA">@{{item.DESCRICAO}}</option>
				</select>
			</div>
		</div> -->
		
		<div class="form-group">
            <label>Documento:</label>
			<input style="width: 145px;" type="text" only-digits2 maxlength="9" class="form-control input-madio text-right"
				ng-model="vm.Caixa.SELECTED.NUMERO_CHEQUE" ng-readonly="!vm.Caixa.ALTERANDO || vm.ConsultaCheques.item.selected == true">
		</div>

		<div class="form-group">
            <label>Histórico:</label>
			<input type="text" required maxlength="100"
                class="form-control input-maior" 
                ng-model="vm.Caixa.SELECTED.HISTORICO"
                ng-readonly="!vm.Caixa.ALTERANDO"
				style="width: 370px !important;">
		</div>
		
		<div class="form-group" ng-if="vm.OBSERVACAO">
            <label>Observação:</label>
            <input type="text" class="form-control input-maior" 
                ng-model="vm.Caixa.SELECTED.OBSERVACAO" maxlength="250"
                ng-readonly="!vm.Caixa.ALTERANDO">
		</div>

		<div class="form-group" style="margin-top: 25px;">
			<a ng-if="vm.Caixa.SELECTED.CHEQUE_TIPO == 'D'" tabindex="-1" href="/_20450?CHEQUE_ID=@{{vm.Caixa.SELECTED.CHEQUE_ID}}" target="_blank" rel="noopener noreferrer" title="20450 - Registro de Recebimento de Cheques" accesskey="e">
				<button ng-if="vm.Caixa.SELECTED.CHEQUE_ID > 0" type="button" class="btn btn-primary" data-hotkey="alt+e">
					<span class="glyphicon glyphicon-open"></span> Abrir Cheque
				</button>
			</a>
			<a ng-if="vm.Caixa.SELECTED.CHEQUE_TIPO == 'C'" tabindex="-1" href="/_20490?CHEQUE_ID=@{{vm.Caixa.SELECTED.CHEQUE_ID}}" target="_blank" rel="noopener noreferrer" title="20490 - Registro de Pagamento de Cheques" accesskey="e">
				<button ng-if="vm.Caixa.SELECTED.CHEQUE_ID > 0" type="button" class="btn btn-primary" data-hotkey="alt+e">
					<span class="glyphicon glyphicon-open"></span> Abrir Cheque
				</button>
			</a>
		</div>
		
		<!-- <div class="form-group" ng-if="!vm.Caixa.INCLUINDO">            
            <input id="ctrl_conc" type="checkbox" class="form-control" ng-model="vm.Caixa.SELECTED.CONCILIACAO"
				ng-checked="vm.Caixa.SELECTED.CONCILIACAO == '1'" ng-disabled="true">
			<label for="ctrl_conc" ng-dblclick="vm.Caixa.conciliar();">Conciliação</label>						
		</div> -->

		<!-- <div class="form-group" ng-if="!vm.Caixa.INCLUINDO">            
            <input id="ctrl_conc" type="checkbox" class="form-control" ng-model="vm.Caixa.SELECTED.CONCILIACAO"
				ng-checked="vm.Caixa.SELECTED.CONCILIACAO == '1'" ng-disabled="true">
			<label for="ctrl_conc" ng-dblclick="vm.Caixa.conciliar();">Conciliação</label>						 
			<button type="button" ng-class="vm.Caixa.SELECTED.CONCILIACAO == '1' ? 'btn-danger' : 'btn-primary'"
			 	class="btn" ng-dblclick="vm.Caixa.conciliar();">Conciliação</button>
		</div>-->
<!--		
		<div class="form-group" ng-if="vm.ControleSistema129 == '0' || vm.Caixa.ALTERANDO">
			<label ttitle="Para importar arquivos é necessário habilitar o parâmetro do sistema 129">Arquivo:</label>
            <input 
                type="text"
                class="form-control input-maior" 
                ng-model="vm.Caixa.SELECTED.ARQUIVO"
                ng-readonly="true"
				>
		</div>

		<div class="form-group" ng-if="vm.ControleSistema129 == '1' && !vm.Caixa.ALTERANDO">
			<label>Arquivo:</label>
			<div class="input-group left-icon">
            <input 
                type="text"
                class="form-control input-maior" 
                ng-model="vm.Caixa.SELECTED.ARQUIVO"
                ng-readonly="true"
				
				style="width: 360px !important;">
				<div class="input-group-addon">
					<span class="glyphicon glyphicon-folder-open" style="margin-top: -4px; margin-left: 1px;"></span>
				</div>
			</div>	
		</div>
-->

	</div>

	<br>
	
	<ul id="tab" class="nav nav-tabs" role="tablist"> 
		<li role="presentation" class="active tab-detalhamento">
			<a href="#tab1-container" id="tab1-tab" data-hotkey="alt+1" role="tab" data-toggle="tab" aria-controls="tab1-container" aria-expanded="true">
				Classificação Financeira
			</a>
		</li>

		<li role="presentation" class="tab-detalhamento" ng-if="!vm.Caixa.ALTERANDO">
			<a href="#tab2-container" id="tab2-tab" data-hotkey="alt+2" role="tab" data-toggle="tab" aria-controls="tab2-container" aria-expanded="false">
				Contabilização
			</a>
		</li>

		<li role="presentation" class="tab-detalhamento"  ng-if="!vm.Caixa.ALTERANDO">
			<a href="#tab3-container" id="tab3-tab" data-hotkey="alt+3" role="tab" data-toggle="tab" aria-controls="tab3-container" aria-expanded="false">
				Documentos Ref. Tarifas
			</a>
		</li>
	</ul>

	<div id="tab-content" class="tab-content" style="height: calc(100% - 220px);">
		
		<div role="tabpanel" class="tab-pane active in" id="tab1-container" name="" aria-labelledby="tab1-tab" style="height: 100%; overflow:auto;">
			<div class="row">
				<div style="margin-top: 10px;">   
					<ul class="list-inline">    
						<li>
							<button type="button" class="btn btn-primary btn-incluir" 
								data-hotkey="f6" ng-if="vm.Caixa.ALTERANDO"
								ng-disabled="!{{ userMenu($menu)->INCLUIR }} || vm.Caixa.SELECTED.CHEQUE_ID > 0" 
								ng-click="vm.CaixaItens.incluir()">
								<span class="glyphicon glyphicon-plus"></span> Incluir
							</button>
						</li>                                         
					</ul>
					<div class="tabela_classificacao" id="tabela_classificacao"></div>
				</div>
			</div>
		</div>

		<div role="tabpanel" class="tab-pane" id="tab2-container" name="" aria-labelledby="tab2-tab" style="height: 100%; overflow:auto;">
			<div class="row">
				<div ng-show="!vm.Caixa.ALTERANDO" style="margin-top: 10px;">   
					<div class="tabela_contabilizacao" id="tabela_contabilizacao"></div>
				</div>
			</div>
		</div>

		<div role="tabpanel" class="tab-pane" id="tab3-container" name="" aria-labelledby="tab3-tab" style="height: 100%; overflow:auto;">
			<div class="row">
				<div ng-show="!vm.Caixa.ALTERANDO" style="margin-top: 10px;">   
					<div class="tabela_tarifas" id="tabela_tarifas"></div>
				</div>
			</div>
		</div>

	</div>

	<span style="font-weight: bold; padding: 5px;  color: red;" >Arquivo: @{{vm.Caixa.SELECTED.ARQUIVO}}</span>
	<div class="row" style="margin-top: 5px;">
		<label style="background-color: black; color: yellow; text-align: center;
			width: 100%; font-size: 20pt;border-radius: 10px;"> Valor Total: R$ @{{vm.Caixa.SELECTED.VALOR_TOTAL | number:2 }}</label>
	</div>
	
</div>
</form>

@overwrite