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

@section('modal-start')

    <form class="form-inline"
        ng-submit="vm.confProd.TIPO_ADD < 3 ? vm.confProd.gravar() : vm.confProd.confirmItensSelected()">

    @overwrite

    @section('modal-header-left')

        <div class="modal-title-left-custom">
            <h4 class="modal-title" style="display: flex; justify-content: space-between">
                <!-- @{{ vm.confProd.SELECTED.DESCRICAO }} -->
                <span
                    ng-if="!vm.confProd.ALTERANDO && vm.confProd.EXCLUINDO_MULTIPLOS == false">{{ $descricaoMenu->DESCRICAO_RESUMIDA }}
                    - Visualizar
                </span>
                <span ng-if="vm.confProd.EXCLUINDO_MULTIPLOS">{{ $descricaoMenu->DESCRICAO_RESUMIDA }} - Excluir</span>
                <span ng-if="vm.confProd.INCLUINDO">{{ $descricaoMenu->DESCRICAO_RESUMIDA }} - Incluir</span>
                <span ng-if="vm.confProd.COPIANDO">{{ $descricaoMenu->DESCRICAO_RESUMIDA }} - Copiar</span>
                <span
                    ng-if="vm.confProd.ALTERANDO == true && vm.confProd.INCLUINDO == false && vm.confProd.COPIANDO == false">{{ $descricaoMenu->DESCRICAO_RESUMIDA }}
                    - Alterar
                </span>
            </h4>
            <div>
                {{-- <div class="btn-danger" ng-if="vm.confProd.SELECTED.STATUS_REVISAO == '   ' || vm.confProd.SELECTED.STATUS_REVISAO == ''"
                    style="padding: 2px 10px;border-radius: 4px;">
                    Conferência pendente</div> --}}
                <div class="btn-primary"
                    ng-if="vm.confProd.SELECTED.STATUS_REVISAO == '0   ' || vm.confProd.SELECTED.STATUS_REVISAO == '0'  || vm.confProd.SELECTED.STATUS_REVISAO == 0"
                    style="padding: 2px 10px;border-radius: 4px;">
                    Conferência em aberto</div>
                <div class="btn-success"
                    ng-if="vm.confProd.SELECTED.STATUS_REVISAO == '1   ' || vm.confProd.SELECTED.STATUS_REVISAO == '1'  || vm.confProd.SELECTED.STATUS_REVISAO == 1"
                    style="padding: 2px 10px;border-radius: 4px;">
                    Conferência concluída</div>
            </div>
        </div>
    @overwrite

    @section('modal-header-right')

        <div id="botoes-baixar">
            <button type="button" class="btn btn-primary" ng-show="!vm.authPesagem.AUTH_OK == 1"
                title="Consulta de itens que foram conferidos na pesagem e impressão de etiquetas"
                ng-click="vm.confProd.validar()" data-hotkey="f1">
                <i class='bx bx-select-multiple'></i> Itens pesados
            </button>
            <button type="button" class="btn btn-primary" ng-show="vm.authPesagem.AUTH_OK == 1"
                title="Consulta de itens que foram conferidos na pesagem e impressão de etiquetas"
                ng-click="vm.confProdImpressao.incluir()" data-hotkey="f1">
                <i class='bx bx-select-multiple'></i> Itens pesados
            </button>
            <button ng-if="!vm.confProd.ALTERANDO && vm.confProd.EXCLUINDO_MULTIPLOS == false" type="button"
                class="btn btn-default btn-fechar-modal btn-voltar" ng-click="vm.confProd.fecharModal()" data-hotkey="esc">
                <span class="glyphicon glyphicon-chevron-left"></span> Voltar
            </button>
        </div>

    @overwrite

    @section('modal-body')
        <div class="area-confprod-main">
            <div id="filtro_main" class="table-filter collapse in" aria-expanded="true"
                style="
                    margin-bottom: 0px;
                    display: flex;
                    align-items: flex-start;
                    background: rgba(221,221,221,.33);
                    padding: 5px 7px;
                    border-radius: 5px;
                    ">
                <div class="controller" style="display: flex; flex-direction: column">
                    <div class="row">
                        <div class="form-group" style="width: 25vw; min-width: 200px;">
                            <label>Fornecedor</label>
                            <input type="text" style="width: 100% !important; min-width: 180px;" placeholder="chave"
                                ng-model="vm.confProd.SELECTED.FFORNECEDOR" class="form-control input-maior filter_main"
                                disabled>
                        </div>
                        <div class="form-group" style="width: 10vw; min-width: 50px;">
                            <label>Doc. Fiscal <a tabindex="-1" href="/_21140?NF_ID=@{{ vm.confProd.SELECTED.CONTROLE }}" target="_blank"
                                    rel="noopener noreferrer"><span class="fa fa-external-link"
                                        title="11361 - Configuração de Etiquetas de Impressoras Térmicas"></span></a></label>
                            <input type="text" style="width: 100% !important; min-width: 50px;" placeholder="chave"
                                ng-model="vm.confProd.SELECTED.NF" class="form-control input-maior filter_main" disabled>
                        </div>
                        <div class="form-group" style="width: 10vw; min-width: 50px;">
                            <label>Data de emissão</label>
                            <input type="text" style="width: 100% !important; min-width: 50px;" placeholder="chave"
                                ng-model="vm.confProd.SELECTED.DATA_EMISSAO" class="form-control input-maior filter_main"
                                disabled>
                        </div>
                        <div class="form-group" style="width: 10vw; min-width: 50px;">
                            <label>Data de entrada</label>
                            <input type="text" style="width: 100% !important; min-width: 50px;" placeholder="chave"
                                ng-model="vm.confProd.SELECTED.DATA_ENTRADA" class="form-control input-maior filter_main"
                                disabled>
                        </div>
                    </div>
                </div>
                <div class="controller"
                    style="display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end;">

                    <button type="button" class="btn btn-warning" style="height: 30px !important;"
                        title="Clique para autenticar operador" ng-click="vm.confProd.validar()"
                        ng-if="vm.authPesagem.AUTH_OK == 0" data-hotkey="f6">
                        <span class="glyphicon glyphicon-user"></span>Autenticar operador
                    </button>

                    <button type="button" class="btn btn-danger" style="height: 30px !important;"
                        title="Clique para deslogar operador" ng-click="vm.authPesagem.logoutOperador()"
                        ng-if="vm.authPesagem.AUTH_OK == 1">
                        <p style="display: contents;"><strong>OPERADOR: </strong> @{{ vm.confProd.OPERADOR.NOME }}</p>
                        <span class="glyphicon glyphicon-log-out"></span>
                    </button>
                    @include('estoque._15300.modal.components.botoes-de-acao')
                </div>
            </div>

            <div class="row responsive-ctrl-to-flex" style="display: flex; justify-content: space-between; width: 96vw;">

                <div class="column">
                    <h4 title="Produtos do documento fiscal"><strong>Produtos</strong></h4>
                    <div class="tabela_secundaria" id="tabela_secundaria"></div>
                </div>
                <div class="column" style="width: 28vw;display: flex;align-items: flex-start;justify-content: end;">
                    {{-- <div class="tabela_ob_conferida" id="tabela_ob_conferida"></div> --}}
                    @include('estoque._15300.modal.components.obtable')
                </div>
            </div>
            <br>
        </div>
        <div class="totalizador-container" style="">
            <div class="input-grooup">
                <label for="">Peso Líquido Conferidos</label>
                <input type="text" ng-value="vm.confProd.SELECTED.DESC_PESO_REV" class="input-ob-conf-tec" disabled
                    title="Peso liquido conferido.">
            </div>
            <div class="input-grooup">
                <label for="">Peso Líquido Doc. fiscal</label>
                <input type="text" ng-value="vm.confProd.SELECTED.DESC_PESO_DOC" class="input-ob-conf-tec" disabled
                    title="Peso liquido no documento fiscal.">
            </div>
            <div class="input-grooup">
                <label for="">Volumes Conferidos</label>
                <input type="text" ng-value="vm.confProd.SELECTED.VOL_REV" class="input-ob-conf-tec" disabled
                    title="Quantidade de volumes conferidos.">
            </div>
            <div class="input-grooup">
                <label for="">Volumes Doc. fiscal</label>
                <input type="text" ng-value="vm.confProd.SELECTED.VOL_DOC" class="input-ob-conf-tec" disabled
                    title="Quantidade de volumes no documento fiscal.">
            </div>

            <div style="display: flex;align-items: center;padding: 0 10px;/* width: 10px; */height: auto;gap: 10px;"
                ng-if="vm.balancaLigada == true">
                <div style="background-color: yellow; width: 1px; height: 50px;"></div>
                <div style="padding: 2px;">
                    <div
                        style="
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        gap: 10px;
                        ">
                        <div class="input-grooup">
                            <label for="">Peso bruto (Balança)</label>
                            <input type="text" ng-value="vm.confProd.BAL_PES_BRUTO" class="input-ob-conf-tec"
                                disabled="" title="Quantidade de volumes conferidos.">
                        </div>
                        <div class="input-grooup">
                            <label for="">Peso Líquido (Balança)</label>
                            <input type="text" ng-value="vm.confProd.BAL_PES_LIQUIDO" class="input-ob-conf-tec"
                                disabled="" title="Quantidade de volumes no documento fiscal.">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
@overwrite