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

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

@section('modal-header-left')

<h4 class="modal-title">
	<!-- @{{vm.ImportarModelos.IMP.REMESSA.DESCRICAO}} -->
	<span ng-if="!vm.ImportarModelos.ALTERANDO">{{ Lang::get('ppcp/_22599.titulo6-exibir') }}</span>
	<span ng-if="vm.ImportarModelos.INCLUINDO">{{ Lang::get('ppcp/_22599.titulo6-incluir') }}</span>
	<span ng-if="vm.ImportarModelos.ALTERANDO == true && vm.ImportarModelos.INCLUINDO == false">{{ Lang::get('ppcp/_22599.titulo6-alterar') }}</span>
</h4>

@overwrite

@section('modal-header-right')

	<button ng-disabled="(vm.ImportarModelos.LISTA_MODELOS.length == 0 || vm.ImportarModelos.LISTA_CORES.length == 0)" ng-if="vm.ImportarModelos.ALTERANDO && vm.ImportarModelos.TIPO_ADD < 3" type="submit" class="btn btn-success" data-hotkey="f1">
        <span class="glyphicon glyphicon-ok"></span> Confirmar
    </button>
	
	<button ng-if="vm.ImportarModelos.ALTERANDO && vm.ImportarModelos.TIPO_ADD == 3" type="submit" class="btn btn-success" data-hotkey="f1">
        <span class="glyphicon glyphicon-ok"></span> Confirmar
    </button>
	
	<button ng-if="vm.ImportarModelos.ALTERANDO" ng-click="vm.ImportarModelos.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.ImportarModelos.TIPO_ADD == 2 && vm.Remessa2.ALTERANDO == false)" ng-if="!vm.ImportarModelos.ALTERANDO" ng-click="vm.ImportarModelos.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.ImportarModelos.TIPO_ADD == 2 && vm.Remessa2.ALTERANDO == false)" ng-if="!vm.ImportarModelos.ALTERANDO" ng-click="vm.ImportarModelos.excluir()" type="button" class="btn btn-danger" data-hotkey="f12">
        <span class="glyphicon glyphicon-trash"></span> Excluir
    </button>
	
	<button ng-if="!vm.ImportarModelos.ALTERANDO" type="button" class="btn btn-default btn-fechar-modal btn-voltar" ng-click="vm.ImportarModelos.fecharModal()" data-hotkey="esc">
		<span class="glyphicon glyphicon-chevron-left"></span> Voltar
    </button>	

@overwrite

@section('modal-body')
<div style="height: calc(100vh - 180px);">
	
    <div style="display: inline-block; width: 100%;">
        <fieldset style="margin-top: 10px !important;">
        <legend>Modelo/Cor</legend>	

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

        <div style="width: 100%; display: flex;">

            <div style="width: 438px;
                        background-color: aliceblue;
                        border: 1px solid #c4e3ff;
                        padding: 5px;
                        border-radius: 5px;
                        display: inline-block;
                        max-height: 350px;
                        overflow: auto;">
                        
                <div style="text-align: center;">Modelos</div>

                <div  style="width: 100%;
                        border: 1px solid #c4e3ff;
                        padding: 4px;
                        margin: 2px;
                        font-weight: bold;
                        background-color: #c4e3ff;
                        border-radius: 5px;" ng-repeat="modelo in vm.ImportarModelos.LISTA_MODELOS">
                        
                        <div style="overflow: hidden;
                                    text-overflow: ellipsis;
                                    display: inline-block;
                                    white-space: nowrap;
                                    width: calc(100% - 110px);">@{{modelo.ID}} - @{{modelo.DESCRICAO}}</div>
                        
                    <button title="Remover Modelo" ng-click="vm.ImportarModelos.removerModelo(modelo);" style="float: right; margin-top: -2px;" type="button" class="btn btn-sm btn-danger">
                        <span class="glyphicon glyphicon-trash"></span>
                    </button>

                    <button title="Adicionar todas as cores do modelo" ng-click="vm.ImportarModelos.getCoresModelo(modelo.ID);" style="padding: 3px 5px 1px 5px; margin-right: 5px; float: right; margin-top: -2px;" type="button" class="btn btn-sm btn-success">
                        CORES
                    </button>

                </div>
            </div>

            <div style="width: 438px;
                        margin-left: 14px;
                        background-color: #f2fff0;
                        border: 1px solid #d5ffc4;
                        padding: 5px;
                        border-radius: 5px;
                        display: inline-block;
                        max-height: 350px;
                        overflow: auto;">
                    
                <div style="text-align: center;">Cores</div>

                <div  style="width: 100%;
                        border: 1px solid #d5ffc4;
                        padding: 4px;
                        margin: 2px;
                        font-weight: bold;
                        background-color: #d5ffc4;
                        border-radius: 5px;"  ng-repeat="modelo in vm.ImportarModelos.LISTA_CORES">
                        
                        <div style="overflow: hidden;
                                    text-overflow: ellipsis;
                                    display: inline-block;
                                    white-space: nowrap;
                                    width: calc(100% - 40px);">@{{modelo.ID}} - @{{modelo.DESCRICAO}}</div>
                        
                        <button title="Remover Cor" ng-click="vm.ImportarModelos.removerCor(modelo);" style="float: right; margin-top: -2px;" type="button" class="btn btn-sm btn-danger">
                            <span class="glyphicon glyphicon-trash"></span>
                        </button>
                    </div>
            </div>

        </div>
        </fieldset>
    </div>

    <br>
    <br>

    <div style="display: inline-block; width: 100%;">
        <fieldset ng-if="vm.ImportarModelos.LISTA_MODELOS.length > 0" style="margin-top: 10px !important;">
            <legend>Quantidade por Tamanho</legend>					
            <div class="form-group" style="display: contents; width: 100% !important; padding-left: 15px; padding-bottom: 15px; border-radius: 9px; border-width: 1px 1px 1px 1px; border-color: rgb(221, 221, 221); border-style: solid; margin-top: -9px;">
                <div class="form-group" style="width: 100%" id="test">
                <div class="input-group" ng-repeat="item in vm.ImportarModelos.LISTA_GRADE track by $index" style="margin-right: 10px; margin-bottom: 5px; margin-top: 2px; margin-left: 5px;">
                        <div class="input-group-addon registroTransacaoTamanhoAddon" ng-class="item.ALTERAR == '1' ? 'green999box' : 'gray999box'" style="padding: 9px; width: 47px;">
                            <span>@{{item.TAMANHO_DESCRICAO}}</span>
                        </div>

                        <input
                            tabindex="@{{item.TABINDEX}}"
                            ng-number-format="0"
                            type="text"
                            style="width: 110px !important;"
                            class="form-control text-right imput-tamanho-grade"
                            ng-model="item.QUANTIDADE"
                            ng-readonly="item.ALTERAR == 0"
                            ng-disabled="item.ALTERAR == 0"
                            min="0"
                            onfocus="this.select();">

                    </div> 
                    
                    <div class="input-group" style="margin-right: 10px; margin-bottom: 5px; margin-top: 2px; margin-left: 5px;">
                        <div class="input-group-addon registroTransacaoTamanhoAddon green999box"
                            style="padding: 9px;
                            width: 60px;
                            background-color: #d5ffc4;
                            font-weight: bold;">
                            <span>Folhas</span>
                        </div>

                        <input
                            tabindex
                            ng-number-format="1"
                            type="text"
                            style="width: 110px !important;"
                            class="form-control text-right imput-tamanho-grade"
                            ng-model="vm.ImportarModelos.QUANTIDADE_FOLHAS"
                            min="0.1"
                            onfocus="this.select();">

                    </div> 
                </div>
            </div>
        </fieldset>
    </div>

</div>
</form>

@overwrite