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

@section('modal-start')
    <form class="form-inline" ng-submit="vm.CatalogoItens.TIPO_ADD < 3 ? vm.CatalogoItens.gravar() : vm.CatalogoItens.confirmItensSelected()">
@overwrite

@section('modal-header-left')

<h4 class="modal-title">
	<!-- @{{vm.Catalogo.SELECTED.DESCRICAO}} -->
	<span ng-if="!vm.CatalogoItens.ALTERANDO">{{ Lang::get('vendas/_12460.titulo2-exibir') }}</span>
	<span ng-if="vm.CatalogoItens.INCLUINDO">{{ Lang::get('vendas/_12460.titulo2-incluir') }}</span>
	<span ng-if="vm.CatalogoItens.COPIANDO">{{ Lang::get('vendas/_12460.titulo2-copiar') }}</span>
	<span ng-if="vm.CatalogoItens.ALTERANDO == true && vm.CatalogoItens.INCLUINDO == false && vm.CatalogoItens.COPIANDO == false">{{ Lang::get('vendas/_12460.titulo2-alterar') }}</span>
</h4>

@overwrite

@section('modal-header-right')

	<button ng-if="vm.CatalogoItens.ALTERANDO && vm.CatalogoItens.TIPO_ADD < 3" type="submit" class="btn btn-success" data-hotkey="f1">
        <span class="glyphicon glyphicon-ok"></span> Gravar
    </button>
	
	<button ng-if="vm.CatalogoItens.ALTERANDO && vm.CatalogoItens.TIPO_ADD == 3" type="submit" class="btn btn-primary" data-hotkey="f1">
        <span class="glyphicon glyphicon-ok"></span> Confirmar
    </button>
	
	<button ng-if="vm.CatalogoItens.ALTERANDO" ng-click="vm.CatalogoItens.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)->INCLUIR }}" ng-if="!vm.CatalogoItens.ALTERANDO && '{{Auth::user()->NOME}}' == 'GCWEB'" ng-click="vm.Catalogo.convertImagemCadastro(vm.CatalogoItens.SELECTED.MODELO_ID)" type="button" class="btn btn-warning" data-hotkey="">
		<span class="glyphicon glyphicon-refresh"></span> Converter Imagens do Modelo para WEBP
	</button> -->
	
	<button ng-disabled="!{{ userMenu($menu)->INCLUIR }}" ng-if="!vm.CatalogoItens.ALTERANDO" ng-click="vm.CatalogoItens.copiarImagensModelo()" type="button" class="btn btn-warning" data-hotkey="alt+p">
		<span class="glyphicon glyphicon-import"></span> Importar Imagens do Modelo
	</button>
	
	<button ng-disabled="!{{ userMenu($menu)->INCLUIR }}" ng-if="!vm.CatalogoItens.ALTERANDO" ng-click="vm.CatalogoItens.ajusteImgTamModelo()" type="button" class="btn btn-success" data-hotkey="alt+o">
		<span class="glyphicon glyphicon-refresh"></span> Atualizar Cores/Tamanhos
	</button>

	<!-- <button ng-disabled="!{{ userMenu($menu)->INCLUIR }}" ng-if="!vm.CatalogoItens.ALTERANDO" ng-click="vm.CatalogoItens.incluirNovo()" type="button" class="btn btn-primary" data-hotkey="f7">
		<span class="glyphicon glyphicon-plus"></span> Incluir Novo Registro
	</button> 

	<button ng-disabled="!{{ userMenu($menu)->INCLUIR }}" ng-if="!vm.CatalogoItens.ALTERANDO" ng-click="vm.CatalogoItens.copiar()" type="button" class="btn btn-primary" data-hotkey="f8">
		<span class="fa fa-files-o"></span> Copiar Registro
	</button> -->

	<button ng-disabled="{{ userMenu($menu)->ALTERAR }} == 0 || (vm.CatalogoItens.TIPO_ADD == 2 && vm.Catalogo.ALTERANDO == false)" ng-if="!vm.CatalogoItens.ALTERANDO" ng-click="vm.CatalogoItens.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.CatalogoItens.TIPO_ADD == 2 && vm.Catalogo.ALTERANDO == false)" ng-if="!vm.CatalogoItens.ALTERANDO" ng-click="vm.CatalogoItens.excluir()" type="button" class="btn btn-danger" data-hotkey="f12">
        <span class="glyphicon glyphicon-trash"></span> Excluir
    </button>
	
	<button ng-if="!vm.CatalogoItens.ALTERANDO" type="button" class="btn btn-default btn-fechar-modal btn-voltar" ng-click="vm.CatalogoItens.fecharModal()" data-hotkey="esc">
		<span class="glyphicon glyphicon-chevron-left"></span> Voltar
    </button>	

@overwrite

@section('modal-header-end')

@overwrite

@section('modal-body')
<div style="height: calc(100vh - 230px);">
<!--<span class="btn btn-xs btn-default glyphicon glyphicon-refresh"></span>-->
<!--<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">
				1
			</a>
		</li>

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

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

	<div id="tab-content" class="tab-content"  style="height: calc(100% - 45px);">
		
		<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>
		</div>

		<div role="tabpanel" class="tab-pane" id="tab2-container" name="" aria-labelledby="tab2-tab" style="height: 100%; overflow:auto;">
			<div class="row">

			</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>
		</div>

	</div>
	
	-->

	<!---->
	<div class="row" ng-show="vm.CatalogoItens.TIPO_ADD < 3">

		<div class="form-group">
			<label>ID:</label>
			<input 
				type="text"
				ng-model="vm.CatalogoItens.SELECTED.DESC_ID"
				class="form-control input-menor" 
				readonly="readonly">
		</div>

		<div class="form-group">
			<label>Descrição:</label>
			<input 
				type="text"
				class="form-control input-maior" 
				ng-model="vm.CatalogoItens.SELECTED.DESC_MODELO"
				readonly="readonly">
		</div>

		<div class="form-group">
			<label>Preço Venda:</label>
			<div class="input-group left-icon">
				<div class="input-group-addon">R$</div>
				<input 
					type="text"
					class="form-control input-medio" 
					ng-number-format="2"
					min="0"
					max="9999999"
					step="1"
					ng-model="vm.CatalogoItens.SELECTED.MODELO_PRECO_VEND"
					readonly="readonly"
					style="text-align: right;">
			</div>
		</div>

		<!-- <div class="form-group">
			<label>Status:</label>
			<label class="switch">
				<input 
					type="checkbox" 
					ng-checked="vm.CatalogoItens.SELECTED.STATUS == '1'"
					ng-true-value="'1'"
					ng-false-value="'0'"
					ng-disabled="!vm.CatalogoItens.ALTERANDO"
					ng-click="vm.CatalogoItens.SELECTED.STATUS = (vm.CatalogoItens.SELECTED.STATUS == '1') ? '0' : '1'">
				<div 
					class="slider"></div>
			</label>
		</div> -->

		<!-- <div class="form-group">
			<input type="checkbox" id="click2" class="form-control"
				ng-checked="vm.CatalogoItens.SELECTED.MARCADO == '1'"
				ng-true-value="'1'"	ng-false-value="'0'"
				check-standard2
				ng-model="vm.CatalogoItens.SELECTED.MARCADO"
				ng-disabled="!vm.CatalogoItens.ALTERANDO">
			<label for="click2" style="margin-left: 5px; font-weight: bold">
				Marcado
			</label>
		</div> -->

		<!-- <div style="display: -webkit-inline-box;" class="consulta-usuario"></div> -->
		<!-- <div class='div_arquivos'></div> -->

		<fieldset style="margin-top: 10px;">
			<legend>Imagens</legend>
			<div style="margin-bottom: 10px;">

				<div class="row">

					<!-- -------------------------------------------------------------------- -->
					<!-- -- Exibição da Imagem ---------------------------------------------- -->

					<div 
						id="render_foto" 
						style="background-color: rgb(255, 255, 255); 
							background-size: contain; 
							border: 1px solid rgb(51, 122, 183); 
							background-repeat: no-repeat; 
							background-position: center center; 
							height: 116px; 
							border-radius: 12px 12px 0px 0px; 
							width: 136px; 
							z-index: 99999;
							transform: scale(2);
							margin-left: 100px;
							margin-top: -120px;
							position: fixed;
							display: none;">
					</div>

					<!-- -------------------------------------------------------------------- -->

					<div>

						<fieldset style="margin-top: 10px; margin-bottom: 10px;">

							<span 
								ng-if="vm.CatalogoItens.SELECTED.STATUS > 0" 
								style="border: solid 1px transparent; 
									border-color: #52a952; 
									padding: 10px; 
									font-size: 14pt; 
									background-color: #65cf65; 
									font-weight: bold; 
									border-radius: 4px; 
									display: flex; 
									justify-content: center; 
									align-content: center; 
									flex-wrap: nowrap; 
									align-items: center;">@{{ vm.CatalogoItens.SELECTED.DESC_MODELO }}</span>

							<span 
								ng-if="vm.CatalogoItens.SELECTED.STATUS == 0"
								style="border: solid 1px transparent; 
									border-color: #bb3434; 
									padding: 10px;
									font-size: 14pt; 
									background-color: #f35656; 
									font-weight: bold; 
									border-radius: 4px; 
									display: flex; 
									justify-content: center; 
									align-content: center;
									flex-wrap: nowrap;
									align-items: center;">@{{ vm.CatalogoItens.SELECTED.DESC_MODELO }}</span>

							<div style="margin-bottom: 10px; overflow-x: auto; background-color: #f3f0f0;">

								<div style="display: inline-flex; margin: 2px; flex-wrap: nowrap; justify-content: center; align-content: center; align-items: center;">

									<div ng-if="chave.EXIST == 1" ng-repeat="chave in vm.CatalogoVinculoTamImg.DADOS.IMAGENS track by $index" 
										id="foto_@{{vm.CatalogoItens.SELECTED.DESC_MODELO_ID}}_@{{$index}}" 
										ng-mouseover="vm.ZoominItem(chave, $index, $event, 2);" 
										ng-mouseleave="vm.ZoomoutItem(chave, $index, $event);" 
										ng-show="vm.CatalogoVinculoTamImg.DADOS.IMAGENS.length > 0"
										style="background-color: rgb(255, 255, 255); margin-right: 5px; 
											background-size: contain; 
											border: 1px solid rgb(51, 122, 183); 
											background-repeat: no-repeat; 
											background-position: center center; 
											height: 116px; 
											border-radius: 12px 12px 0px 0px; 
											width: 136px; 
											background-image: url('@{{chave.DADOS}}');">

										<button ng-disabled="{{ userMenu($menu)->EXCLUIR }} == 0 || vm.CatalogoItens.ALTERANDO" ng-click="vm.CatalogoImagens.excluirImagemModelo(vm.CatalogoItens.SELECTED.MODELO_ID, chave);" type="button" class="btn btn-danger exc-image">
											<span class="glyphicon glyphicon-trash" style="font-size: 8pt;"></span>
										</button>
									</div>

									<div style="margin: 20px;">
										<button ng-disabled="{{ userMenu($menu)->INCLUIR }} == 0 || vm.CatalogoItens.ALTERANDO" ng-click="vm.CatalogoImagens.incluirImagemModelo(vm.CatalogoItens.SELECTED);" type="button" class="btn btn-primary">
											<span class="glyphicon glyphicon-plus"></span>
										</button>
									</div>

								<div>

							</div>
						</fieldset>

					</div>

				</div>

			</div>
		</fieldset>

		<fieldset style="margin-top: 10px;">
			<legend>Cores e Tamanhos Disponíveis</legend>
			<div style="margin-bottom: 10px;">
				<ul class="list-inline">
					<!-- <li>
						<button 
							type="button" 
							class="btn btn-primary btn-incluir" 
							data-hotkey="f6"
							ng-disabled="!{{ userMenu($menu)->INCLUIR }}" 
							ng-click="vm.CatalogoVinculoTamImg.incluir()">
							<span class="glyphicon glyphicon-plus"></span> Incluir
						</button>
					</li> -->
				</ul>

				<div style="width: 100%; display: inline-flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center;">
					<div style="width: calc(50% - 10px); float: left; margin: 0px 2px;" style="width: 100%;">
						<div class="tabela_vinculo_cor" id="tabela_vinculo_cor"></div>
					</div>
					<div style="width: calc(50% - 10px); float: right; margin: 0px 2px;" style="width: 100%;">
						<div class="tabela_vinculo_tam" id="tabela_vinculo_tam"></div>
					</div>
				</div>
			</div>
		</fieldset>

	</div>


	<!---->
	<div class="row" ng-show="vm.CatalogoItens.TIPO_ADD == 3">

		<div id="filtro_main" class="table-filter collapse in" aria-expanded="true" 
			style="margin-bottom: 4px;
					background: rgba(221,221,221,.33);
					padding: 2px 10px 7px;
					border-radius: 5px;">

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

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

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

			<div class="form-group" style="margin-top: -5px;">
				<input type="checkbox" id="click748" class="form-control"
					ng-checked="vm.CatalogoItens.FILTRO_ESTOQUE == '1'"
					ng-true-value="'1'"	ng-false-value="'0'"
					check-standard2
					ng-model="vm.CatalogoItens.FILTRO_ESTOQUE">
				<label for="click748" style="margin-left: 5px; font-weight: bold">
					Somente Modelos com Estoque Disponível
				</label>
			</div>

			<div class="form-group" style="width: calc(100% - 190px); padding-top: 15px; min-width: 200px;">
				<input type="text" style="width: 100% !important; min-width: 170px;"
					placeholder="Filtragem rápida..."
					class="form-control input-maior filter_main_itens" 
					ng-model="vm.CatalogoItens.FILTRO_DADOS_ADD">
			</div>
			
			<!-- Caso a Tabela de Itens for Infinite Scroll, passar '1' na função getItensAdd() -->
			<div class="form-group" style="margin-top: 17px; width: fit-content; padding-right: 10px;">
				<button type="button" ng-click="vm.CatalogoItens.getItensAdd(1)" class="btn btn-xs btn-primary btn-filtrar"
					data-hotkey="alt+f" id="btn-table-filter2">
					<span class="glyphicon glyphicon-filter"></span> Filtrar
				</button>
			</div>	
		</div>

		<div class="tabela_add_itens" id="tabela_add_itens"></div> 
	</div>
	
	
</div>
</form>

@overwrite