@extends('master')

@section('titulo')
    {{ Lang::get('admin/_11360.titulo') }}
@endsection

@section('estilo')
    <link rel="stylesheet" href="{{ elixir('assets/css/11360.css') }}" />
@endsection

@section('conteudo')
<div ng-controller="Ctrl as vm" ng-cloak>
    
    
    <ul class="list-inline acoes">    
        <li>
            <button 
                type="button" 
                class="btn btn-default" 
                data-hotkey="f1"
                no-focus="true"
                ng-click="vm.ZplViewer.refreshLabel()">
                <span class="glyphicon glyphicon-refresh"></span> Atualizar Visualização
            </button>
            <button 
                type="button" 
                class="btn btn-default" 
                no-focus="true"
                id="addImage"
                
                ng-click="vm.$('#imageFile').click();">
                <span class="fa fa-image"></span> Abrir Imagem
            </button>
            <button 
                type="button" 
                class="btn btn-warning" 
                data-hotkey="f2"
                no-focus="true"
                ng-click="vm.ZplViewer.print()">
                <span class="fa fa-print"></span> Imprimir Etiqueta
            </button>
            <a href="/helpers/zebra-print-delphi.exe" class="btn btn-info">
                Baixar Zebra Print Delphi
            </a>
            <a href="/helpers/zebra-print-java.exe" class="btn btn-info">
                Baixar Zebra Print Java
            </a>
        </li>
    </ul>      
    
    <div>
        <div style="float: left; width: calc(50vw - 40px); height: calc(100vh - 135px); margin-right: 10px;">
            <ul class="nav nav-tabs">
                <li  class="active">
                    <a data-toggle="tab" href="#tab-code">Código ZPL</a>
                </li>
                <li>
                    <a data-toggle="tab" href="#tab-vars">Variáveis</a>
                </li>
                <li>
                    <a data-toggle="tab" href="#tab-etiqueta" ng-click="vm.Etiqueta.consultar()"> Selecionar Modelo</a>
                </li>
                <li>
                    <a data-toggle="tab" href="#tab-importacao" ng-click="vm.Etiqueta.consultarImp()">Importação</a>
                </li>
            </ul>

            <div class="tab-content" style="float: left; width: calc(50vw - 40px); height: calc(100vh - 175px); margin-right: 10px;">
                <div id="tab-code" class="tab-pane fade in active" style="height: 100%;"> 

                    <textarea 
                        ng-model="vm.ZplViewer.CODE" 
                        class="normal-case" 
                        id="zpl" 
                        style="width: 100%; height: calc(100% - 100px);" 
                        spellcheck="false"
                        ng-init="vm.ZplViewer.CODE = '^XA\n\
^PW800\n\
^LL500\n\
\n\
^CI28^FS\n\
^PON^LH10,10^LT0^FO650,0^PR4,4,4^FS\n\
^MD8^FS\n\
\n\
\n\
^FX -------- BARRA GRADE ---------\n\
^FO0,10^GB400,10,15,,0^FS\n\
^FX -------- RETANGULO GRADE ---------\n\
^FO0,22^GB400,196,3^FS\n\
^FX -------- LABEL TAMANHO ---------\n\
^FO65,11^ABN10,10,10^FDQUANTIDADE DISPONIVEL NA CAIXA^FR^FS\n\
^FX -------- DIVISOR VERTICAL GRADE ---------\n\
^FO65,22^GB0,196,4,,0^FS\n\
^FO135,22^GB0,196,4,,0^FS\n\
^FO200,22^GB0,196,4,,0^FS\n\
^FO268,22^GB0,196,4,,0^FS\n\
^FO332,22^GB0,196,4,,0^FS\n\
^FX -------- DIVISOR HORIZONTAL GRADE ---------\n\
^FO0,71^GB400,0,4,,0^FS\n\
^FO0,118^GB400,0,4,,0^FS\n\
^FO0,165^GB400,0,4,,0^FS\n\
^FX -------- VALORES GRADE --------\n\
^FO008,038^ABN60,20,20^FD#QTD_01#^FS\n\
^FO076,038^ABN60,20,20^FD#QTD_02#^FS\n\
^FO143,038^ABN60,20,20^FD#QTD_03#^FS\n\
^FO208,038^ABN60,20,20^FD#QTD_04#^FS\n\
^FO276,038^ABN60,20,20^FD#QTD_05#^FS\n\
^FO340,038^ABN60,20,20^FD#QTD_06#^FS\n\
^FO008,086^ABN60,20,20^FD#QTD_07#^FS\n\
^FO076,086^ABN60,20,20^FD#QTD_08#^FS\n\
^FO143,086^ABN60,20,20^FD#QTD_09#^FS\n\
^FO208,086^ABN60,20,20^FD#QTD_10#^FS\n\
^FO276,086^ABN60,20,20^FD#QTD_11#^FS\n\
^FO340,086^ABN60,20,20^FD#QTD_12#^FS\n\
^FO008,133^ABN60,20,20^FD#QTD_13#^FS\n\
^FO076,133^ABN60,20,20^FD#QTD_14#^FS\n\
^FO143,133^ABN60,20,20^FD#QTD_15#^FS\n\
^FO208,133^ABN60,20,20^FD#QTD_16#^FS\n\
^FO276,133^ABN60,20,20^FD#QTD_17#^FS\n\
^FO340,133^ABN60,20,20^FD#QTD_18#^FS\n\
^FO008,181^ABN60,20,20^FD#QTD_19#^FS\n\
^FO076,181^ABN60,20,20^FD#QTD_20#^FS\n\
^FO143,181^ABN60,20,20^FD#QTD_21#^FS\n\
^FO208,181^ABN60,20,20^FD#QTD_22#^FS\n\
^FO276,181^ABN60,20,20^FD#QTD_23#^FS\n\
^FO340,181^ABN60,20,20^FD#QTD_24#^FS\n\
\n\
\n\
^FX ------ CODIGO BARRAS PRODUTO -------\n\
^FO430,20^BY2^BCN,60,N^FD#CODIGO1^FS\n\
\n\
\n\
^FX DADOS DA IMPRESSAO\n\
^FO430,100^ADN10,20,10^FDDATA/HORA: #DATAHORA^FS\n\
^FO430,125^ADN10,20,10^FDOPR.: #OPERADOR_ID #OPERADOR_NOME^FS\n\
^FO430,150^ADN10,20,10^FDVIA: #VIA  PRD/TAM: #PRODUTO_TAMANHO^FS\n\
^FO430,175^ADN10,70,30^FD#ENDERECAMENTO^FS\n\
\n\
\n\
^FX ------ DADOS DO PRODUTO -------\n\
^FO0,230^ARN60,80,15^FD#PRODUTO2^FS\n\
\n\
\n\
^FX -------- RETANGULO TAMANHOS ---------\n\
^FO0,300^GB300,10,15,,0^FS\n\
^FX -------- BARRA TAMANHO / USA ---------\n\
^FO0,300^GB300,190,3^FS\n\
^FX -------- LABEL TAMANHO ---------\n\
^FO5,301^ABN10,10,10^FD    TAMANHO/SIZE         USA^FR^FS\n\
^FX -------- DIVISOR VERTICAL TAMANHOS ---------\n\
^FO190,300^GB0,190,4,,0^FS\n\
^FX -------- BARRA EUA ---------\n\
^FO190,395^GB110,10,15,,0^FS\n\
^FX -------- LABEL EUR ---------\n\
^FO195,396^ABN10,10,10^FD    EUR^FR^FS\n\
^FX -------- TAMANHO VALOR ---------\n\
^FO40,300^ARN60,200,120^FD#TAMANHO^FS\n\
^FX -------- USA VALOR ---------\n\
^FO215,305^ARN60,90,50^FD#TAM_USA^FS\n\
^FX -------- EUA VALOR ---------\n\
^FO215,400^ARN60,90,50^FD#TAM_EUR^FS\n\
\n\
\n\
^FX -------- RETANGULO QUANTIDADE ---------\n\
^FO310,300^GB210,97,3^FS\n\
^FX -------- BARRA QUANTIDADE  ---------\n\
^FO310,300^GB210,10,15,,0^FS\n\
^FX -------- LABEL TAMANHO ---------\n\
^FO310,301^ABN10,10,10^FD  QUANTIDADE/QUANTITY^FR^FS\n\
^FX -------- VALOR QUANTIDADE ---------\n\
^FO385,305^ARN60,90,55^FD#QUANTIDADE^FS\n\
\n\
\n\
^FX ------ DADOS DA REMESSA -------\n\
^FO530,300^ADN10,20,10^FDREM.: #REMESSA^FS\n\
^FO530,325^ADN10,20,10^FDCTR.: #NUMERO_TALAO^FS\n\
^FO530,350^ADN10,20,10^FDTAL.: #CONTROLE^FS\n\
^FO530,375^ADN10,20,10^FD#GP_DESCRICAO^FS\n\
\n\
\n\
^FX ------ CODIGO BARRAS TALAO -------\n\
^FO330,415^BY2^BCN,60,N^FD#CODIGO2^FS\n\
\n\
\n\
^FX ------ RODAPE -------\n\
^FO0,495^GB800,10,15,,0^FS\n\
^FO5,496^ABN10,10,10^FD     *MARCA {{ grupo_empresarial }} BOJOS* *BRAND {{ grupo_empresarial }} CUPS* *MADE IN BRAZIL* *FABRIQUE EM BRASIL*^FR^FS\n\
\n\
\n\
\n\
^XZ\n\
'"></textarea>
            
                <label for="index" class="aligned">Show Label:</label>
                <input type="number" placeholder="index" min="0" max="0" step="1" required="required" name="index" id="index" value="0">
                <span class="note">(0 = first label, 1 = second label, etc.)</span>
                <br>

                <label>Labels Available:</label>
                <span id="total">1</span>                 
                <input type="file" style="display: none" id="imageFile" accept="image/*">
            </div>

                <div id="tab-vars" class="tab-pane fade" style="height: 100%;"> 
                    <div class="table-ec">
                        <table class="table table-striped table-hover table-condensed table-bordered">
                            <thead>
                                <tr>
                                    <th>Variável</th>
                                    <!--<th>Descrição</th>-->
                                    <th>Valor</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="item in vm.ZplViewer.VARIAVEIS">
                                    <td>@{{ item.VARIAVEL }}</td>
                                    <!--<td class="text-normal" style="padding: 0"><input type="text" style="width: 100%;height: 27px;" ng-change="vm.watchChange()" ng-model="item.DESCRICAO" /></td>-->
                                    <td class="text-normal" style="padding: 0"><input type="text" style="width: 100%;height: 27px;" ng-change="vm.watchChange()" ng-model="item.VALOR" /></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div id="tab-importacao" class="tab-pane fade" style="height: 100%;"> 

                    <button 
                        type="button" 
                        class="btn btn-sm btn-warning" 
                        no-focus="true"
                        ng-click="vm.ZplViewer.print2()">
                        <span class="fa fa-print"></span> Imprimir Etiqueta
                    </button>

                    <button 
                        type="button" 
                        class="btn btn-sm btn-info" 
                        no-focus="true"
                        ng-click="vm.Etiqueta.SelectTodos(1)">
                        <span class="glyphicon glyphicon-expand"></span> Marcar Todos
                    </button>

                    <button 
                        type="button" 
                        class="btn btn-sm btn-info" 
                        no-focus="true"
                        ng-click="vm.Etiqueta.SelectTodos(0)">
                        <span class="glyphicon glyphicon-unchecked"></span> Desmarcar Todos
                    </button>

                    <div class="form-group" style="width: 60px; display: inline-flex; margin-left: 10px;">
                        <input type="text" style="width: 100%;height: 30px;" ng-model="vm.Etiqueta.QTD" />
                    </div>

                    <button 
                        type="button" 
                        class="btn btn-sm btn-info" 
                        no-focus="true"
                        ng-click="vm.Etiqueta.setQtd(vm.Etiqueta.QTD)">
                        <span class="glyphicon glyphicon-ok"></span> Qtd
                    </button>

                    <div class="form-group" style="margin-bottom: 4px;">
                        <input 
                            type="text"
                            style="width: 100% !important; margin-top: 5px;"
                            placeholder="Filtragem rápida..."
                            class="form-control input-maior" 
                            ng-model="vm.Etiqueta.FILTRO_DADOS">
                    </div>

                    <div class="table-ec" style="height: calc(100vh - 270px);">
                        <table class="table table-striped table-hover table-condensed table-bordered">
                            <thead>
                                <tr>
                                    <th style="width: 50px;">QTD</th>
                                    <th ng-repeat="campo in vm.Etiqueta.CAMPOS">@{{campo}}</th>                                    
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-click="vm.watchChange2(item); item.SELECTED = !item.SELECTED;" ng-repeat="item in vm.Etiqueta.DADOS_RENDER = ( vm.Etiqueta.DADOS_IMP  | find: {model : vm.Etiqueta.FILTRO_DADOS ,fields : 'all'})" tabindex="0"  ng-class="{'selected' : item.SELECTED == true}">
                                    <td class="text-normal" style="padding: 0"><input type="text" style="width: 100%;height: 27px;" ng-model="item.QTD" /></td>
                                    <td style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" ng-repeat="campo in vm.Etiqueta.CAMPOS">@{{ item[campo] }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                </div>

                <div id="tab-etiqueta" class="tab-pane fade" style="height: 100%;"> 
                    <div class="table-ec">
                        <table class="table table-striped table-hover table-condensed table-bordered">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Descrição</th>
                                    <!--<th>Descrição</th>-->
                                    <th>Tipo</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr 
                                    tabindex="0"
                                    ng-repeat="item in vm.Etiqueta.DADOS"
                                    ng-focus="vm.Etiqueta.SELECTED = item; vm.ZplViewer.CODE != item.SCRIPT ? vm.ZplViewer.CODE = item.SCRIPT : '';"
                                    ng-class="{'selected' : vm.Etiqueta.SELECTED == item}">
                                    <td>@{{ item.ID }}</td>
                                    <td>@{{ item.DESCRICAO }}</td>
                                    <td>@{{ item.TIPO }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            
            
            
            
                              
        </div>
        <div style="float: right;width: calc(50vw - 10px);">
            <img style="width: 100%;max-height: 600px;border: 1px solid rgb(169, 169, 169);" id="label" alt="Label">
            <div id="error" style="display:none"></div>
        </div>
    </div>
    
    
</div>
@endsection

@section('script')
    <script src="{{ elixir('assets/js/direct-print.js') }}"></script>
    <script src="{{ elixir('assets/js/_11360.js') }}"></script>
@append