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

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

@section('modal-header-left')

<h4 class="modal-title">
	@{{vm.Mercado.SELECTED.DESCRICAO}}
</h4>

@overwrite

@section('modal-header-right')

	<button ng-if="vm.MercadoItens.ALTERANDO" type="submit" class="btn btn-success" data-hotkey="f1">
        <span class="glyphicon glyphicon-ok"></span> Gravar
    </button>
	
	<button ng-if="vm.MercadoItens.ALTERANDO" ng-click="vm.MercadoItens.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.MercadoItens.ALTERANDO" ng-click="vm.MercadoItens.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.MercadoItens.ALTERANDO" ng-click="vm.MercadoItens.excluir()" type="button" class="btn btn-danger" data-hotkey="f12">
        <span class="glyphicon glyphicon-trash"></span> Excluir
    </button>
	
	<button ng-if="!vm.MercadoItens.ALTERANDO" type="button" class="btn btn-default btn-fechar-modal btn-voltar" data-dismiss="modal" data-hotkey="esc">
      <span class="glyphicon glyphicon-chevron-left"></span> Voltar
    </button>	

@overwrite

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

    <div class="row">
    
        <div class="form-group">
            <label>ID:</label>
            <input 
                type="text"
                ng-model="vm.MercadoItens.SELECTED.ID"
                class="form-control input-menor" 
                readonly="readonly">
        </div>
        
        <div class="form-group">
            <label>Descrição:</label>
            <input 
                type="text"
                class="form-control input-medio" 
                required
                ng-model="vm.MercadoItens.SELECTED.DESCRICAO"
                ng-readonly="!vm.MercadoItens.ALTERANDO"
                form-validate="true">
        </div>

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

        <div class="form-group">
            <label>Qtd. Mínima:</label>
            <input 
                type="number"
                class="form-control input-menor" 
                required
                ng-model="vm.MercadoItens.SELECTED.QTD_MIN"
                ng-readonly="!vm.MercadoItens.ALTERANDO"
                form-validate="true">
        </div>

        <div class="form-group">
            <label>Qtd. Maxima:</label>
            <input 
                type="number"
                class="form-control input-menor" 
                required
                ng-model="vm.MercadoItens.SELECTED.QTD_MAX"
                ng-readonly="!vm.MercadoItens.ALTERANDO"
                form-validate="true">
        </div>

        <div class="form-group">
            <label>Comissão:</label>
            <input 
                type="number"
                class="form-control input-menor" 
                required,
                step="0.01"
                ng-model="vm.MercadoItens.SELECTED.COMISSAO"
                ng-readonly="!vm.MercadoItens.ALTERANDO"
                form-validate="true">
        </div>

        <div class="form-group">
            <label>Qtd Múltipla:</label>
            <input 
                type="number"
                class="form-control input-menor" 
                required
                ng-model="vm.MercadoItens.SELECTED.QTD_MUL"
                ng-readonly="!vm.MercadoItens.ALTERANDO"
                form-validate="true">
        </div>

        <div class="form-group">
            <label>Status:</label>
            <label class="switch">
                <input 
                    type="checkbox" 
                    ng-checked="vm.MercadoItens.SELECTED.STATUS == '1'"
                    ng-true-value="'1'"
                    ng-false-value="'0'"
                    ng-disabled="!vm.MercadoItens.ALTERANDO"
                    ng-click="vm.MercadoItens.SELECTED.STATUS = (vm.MercadoItens.SELECTED.STATUS == '1') ? '0' : '1'">
                <div 
                    class="slider"></div>
            </label>
        </div>
        
        <!-- <div style="display: -webkit-inline-box;" class="consulta-usuario"></div> -->
        
    </div>

    <ul class="nav nav-tabs" style="margin-top: 10px;"  ng-if="!vm.MercadoItens.ALTERANDO" >
        <li  class="active" ng-click="vm.TAB_TIPO = 'PEDIDO'">
            <a data-toggle="tab" href="#tab-frete">Regras de Frete</a>
        </li>
        <li ng-click="vm.TAB_TIPO = 'SIMULADOR'">
            <a data-toggle="tab" href="#tab-pagamento">Regras de pagamento</a>
        </li>
        <li ng-click="vm.TAB_TIPO = 'OUTRAS'">
            <a data-toggle="tab" href="#tab-outas">Regras de Validação</a>
        </li>
        <li ng-click="vm.TAB_TIPO = 'OUTRAS2'">
            <a data-toggle="tab" href="#tab-outas2">Desconto por Preço</a>
        </li>
    </ul> 

    <div class="tab-content"  ng-if="!vm.MercadoItens.ALTERANDO" >
        <div id="tab-frete" class="tab-pane fade in active">
            
            <div class="form-group" style="margin-bottom: 4px; width: 100% !important;">
                <input 
                    type="text"
                    style="width: calc(100% - 88px) !important;"
                    placeholder="Filtragem rápida..."
                    class="form-control input-maior" 
                    required
                    ng-model="vm.Frete.FILTRO_DADOS">

                <button 
                        type="button" 
                        class="btn btn-primary btn-incluir" 
                        data-hotkey="f6"
                        ng-disabled="!{{ userMenu($menu)->INCLUIR }}" 
                        ng-click="vm.Frete.incluir()">
                        <span class="glyphicon glyphicon-plus"></span> Incluir
                    </button>
            </div>
        
            <div class="table-ec table-scroll" style="height: calc(100vh - 480px); min-height: 200px;">
            
                <table class="table table-striped table-bordered table-condensed table-no-break table-middle table-low">
                    <thead>
                        <tr gc-order-by="vm.Frete.ORDER_BY">
                            <th field="STATUS" style="width: 23px; min-width: 23px;" ttitle="Status<br/>Verde: Ativo | Vermelho: Inativo"></th>                    
                            <th field="ID">ID</th>
                            <th field="DESCRICAO">Descrição</th>
                            <th field="FRETE_DESCRICAO">Frete</th>
                            <th field="QTD_MIN">Qtd. Mínima</th>
                            <th field="QTD_MAX">Qtd. Maxima</th>
                            
                        </tr>
                    </thead>
                    <tbody>
                        <tr 
                            ng-repeat="item in vm.Frete.DADOS_RENDER = ( vm.Frete.DADOS | orderBy : vm.Frete.ORDER_BY | find: {model : vm.Frete.FILTRO_DADOS ,fields : 'all'})"
                            ng-Click="vm.Frete.visualizar()"
                            ng-focus="vm.Frete.SELECTED = item"
                            ng-class="{ 'selected' : vm.Frete.SELECTED == item }"
                            tabindex="0"
                            >
                            <td class="t-status status-@{{ item.STATUS }}">
                            </td>
                            <td>
                                <span>
                                    @{{ item.ID || 0 | lpad: [4,0] }}
                                </span>
                            </td>
                            <td>
                                <span>
                                    @{{ item.DESCRICAO }}
                                </span>
                            </td>
                            <td>
                                <span>
                                    @{{ item.FRETE_DESCRICAO }}
                                </span>
                            </td>
                            <td>
                                <span>
                                    @{{ item.QTD_MIN | number:0 }}
                                </span>
                            </td>
                            <td>
                                <span>
                                    @{{ item.QTD_MAX | number:0 }}
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div id="tab-pagamento" class="tab-pane fade">
            <div class="form-group" style="margin-bottom: 4px; width: 100% !important;">
                <input 
                    type="text"
                    style="width: calc(100% - 88px) !important;"
                    placeholder="Filtragem rápida..."
                    class="form-control input-maior" 
                    required
                    ng-model="vm.Pagamento.FILTRO_DADOS">

                <button 
                        type="button" 
                        class="btn btn-primary btn-incluir" 
                        data-hotkey="f6"
                        ng-disabled="!{{ userMenu($menu)->INCLUIR }}" 
                        ng-click="vm.Pagamento.incluir()">
                        <span class="glyphicon glyphicon-plus"></span> Incluir
                    </button>
            </div>
        
            <div class="table-ec table-scroll" style="height: calc(100vh - 480px); min-height: 200px;">
            
                <table class="table table-striped table-bordered table-condensed table-no-break table-middle table-low">
                    <thead>
                        <tr gc-order-by="vm.Pagamento.ORDER_BY">
                            <th field="STATUS" style="width: 23px; min-width: 23px;" ttitle="Status<br/>Verde: Ativo | Vermelho: Inativo"></th>                    
                            <th field="ID">ID</th>
                            <th field="DESCRICAO">Descrição</th>
                            <th field="PAG_DESCRICAO">Cod. Pagamento</th>
                            <th field="JUROS">Juros</th>
                            <th field="QTD_MIN">Qtd. Mínima</th>
                            <th field="QTD_MAX">Qtd. Maxima</th>
                            
                        </tr>
                    </thead>
                    <tbody>
                        <tr 
                            ng-repeat="item in vm.Pagamento.DADOS_RENDER = ( vm.Pagamento.DADOS | orderBy : vm.Pagamento.ORDER_BY | find: {model : vm.Pagamento.FILTRO_DADOS ,fields : 'all'})"
                            ng-Click="vm.Pagamento.visualizar()"
                            ng-focus="vm.Pagamento.SELECTED = item"
                            ng-class="{ 'selected' : vm.Pagamento.SELECTED == item }"
                            tabindex="0"
                            >
                            <td class="t-status status-@{{ item.STATUS }}">
                            </td>
                            <td>
                                <span>
                                    @{{ item.ID || 0 | lpad: [4,0] }}
                                </span>
                            </td>
                            <td>
                                <span>
                                    @{{ item.DESCRICAO }}
                                </span>
                            </td>
                            <td>
                                <span>
                                    @{{ item.PAG_DESCRICAO }}
                                </span>
                            </td>
                            <td>
                                <span>
                                    @{{ item.JUROS | number:2 }}%
                                </span>
                            </td>
                            <td>
                                <span>
                                    @{{ item.QTD_MIN | number:0 }}
                                </span>
                            </td>
                            <td>
                                <span>
                                    @{{ item.QTD_MAX | number:0 }}
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div id="tab-outas" class="tab-pane fade">
            <div class="form-group" style="margin-bottom: 4px; width: 100% !important;">
                <input 
                    type="text"
                    style="width: calc(100% - 88px) !important;"
                    placeholder="Filtragem rápida..."
                    class="form-control input-maior" 
                    required
                    ng-model="vm.Regra.FILTRO_DADOS">

                <button 
                        type="button" 
                        class="btn btn-primary btn-incluir" 
                        data-hotkey="f6"
                        ng-disabled="!{{ userMenu($menu)->INCLUIR }}" 
                        ng-click="vm.Regra.incluir()">
                        <span class="glyphicon glyphicon-plus"></span> Incluir
                    </button>
            </div>
        
            <div class="table-ec table-scroll" style="height: calc(100vh - 480px); min-height: 200px;">
            
                <table class="table table-striped table-bordered table-condensed table-no-break table-middle table-low">
                    <thead>
                        <tr gc-order-by="vm.Regra.ORDER_BY">
                            <th field="STATUS" style="width: 23px; min-width: 23px;" ttitle="Status<br/>Verde: Ativo | Vermelho: Inativo"></th>                    
                            <th field="ID">ID</th>
                            <th field="DESCRICAO">Descrição</th>
                            
                        </tr>
                    </thead>
                    <tbody>
                        <tr 
                            ng-repeat="item in vm.Regra.DADOS_RENDER = ( vm.Regra.DADOS | orderBy : vm.Regra.ORDER_BY | find: {model : vm.Regra.FILTRO_DADOS ,fields : 'all'})"
                            ng-Click="vm.Regra.visualizar()"
                            ng-focus="vm.Regra.SELECTED = item"
                            ng-class="{ 'selected' : vm.Regra.SELECTED == item }"
                            tabindex="0"
                            >
                            <td class="t-status status-@{{ item.STATUS }}">
                            </td>
                            <td>
                                <span>
                                    @{{ item.ID || 0 | lpad: [4,0] }}
                                </span>
                            </td>
                            <td>
                                <span>
                                    @{{ item.DESCRICAO }}
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>    
        </div>

        <div id="tab-outas2" class="tab-pane fade">
            <div class="form-group" style="margin-bottom: 4px; width: 100% !important;">
                <input 
                    type="text"
                    style="width: calc(100% - 88px) !important;"
                    placeholder="Filtragem rápida..."
                    class="form-control input-maior" 
                    required
                    ng-model="vm.Desconto.FILTRO_DADOS">

                <button 
                        type="button" 
                        class="btn btn-primary btn-incluir" 
                        data-hotkey="f6"
                        ng-disabled="!{{ userMenu($menu)->INCLUIR }}" 
                        ng-click="vm.Desconto.incluir()">
                        <span class="glyphicon glyphicon-plus"></span> Incluir
                    </button>
            </div>
        
            <div class="table-ec table-scroll" style="height: calc(100vh - 480px); min-height: 200px;">
            
            <table class="table table-striped table-bordered table-condensed table-no-break table-middle table-low">
                    <thead>
                        <tr gc-order-by="vm.Desconto.ORDER_BY">
                            <th field="STATUS" style="width: 23px; min-width: 23px;" ttitle="Status<br/>Verde: Ativo | Vermelho: Inativo"></th>                    
                            <th field="ID">ID</th>
                            <th field="DESCRICAO">Descrição</th>
                            <th field="JUROS">Desconto</th>
                            <th field="QTD_MIN">Valor Mínimo</th>
                            <th field="QTD_MAX">Valor Maximo</th>
                            
                        </tr>
                    </thead>
                    <tbody>
                        <tr 
                            ng-repeat="item in vm.Desconto.DADOS_RENDER = ( vm.Desconto.DADOS | orderBy : vm.Desconto.ORDER_BY | find: {model : vm.Desconto.FILTRO_DADOS ,fields : 'all'})"
                            ng-Click="vm.Desconto.visualizar()"
                            ng-focus="vm.Desconto.SELECTED = item"
                            ng-class="{ 'selected' : vm.Desconto.SELECTED == item }"
                            tabindex="0"
                            >
                            <td class="t-status status-@{{ item.STATUS }}">
                            </td>
                            <td>
                                <span>
                                    @{{ item.ID || 0 | lpad: [4,0] }}
                                </span>
                            </td>
                            <td>
                                <span>
                                    @{{ item.DESCRICAO }}
                                </span>
                            </td>
                            <td  style="text-align: end;">
                                <span>
                                    @{{ item.DESCONTO | number:2 }}%
                                </span>
                            </td>
                            <td style="text-align: end;">
                                <span>
                                    R$ @{{ item.QTD_MIN | number:0 }}
                                </span>
                            </td>
                            <td style="text-align: end;">
                                <span>
                                    R$ @{{ item.QTD_MAX | number:0 }}
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>    
        </div>

    </div>

</div>
</form>

@overwrite