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

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

    @section('modal-header-left')

        <h4 class="modal-title">
            22609 - Finalização múltipla de talões de produção
        </h4>

    @overwrite

    @section('modal-header-right')

        <button ng-if="vm.Registro.OPERADOR != undefined && vm.Registro.OPERADOR.OPERADOR_ID > 0" type="button"
            class="btn btn-danger" data-hotkey="f8" ng-click="vm.Registro.logofOperador()">
            <span class="fa fa-sign-out"></span> @{{ vm.Registro.OPERADOR.OPERADOR_NOME }}
        </button>

        <button ng-if="vm.Registro.OPERADOR == undefined || vm.Registro.OPERADOR.OPERADOR_ID == 0" type="button"
            class="btn btn-warning" data-hotkey="f8" ng-click="vm.Registro.loginOperador()">
            <span class="glyphicon glyphicon-user"></span> Login Operador
        </button>

        <button type="button" class="btn btn-default btn-voltar" data-dismiss="modal" data-hotkey="esc"
            ng-if="vm.Registro.ITENS_GRAVAR.length <= 0" ng-click="vm.ManualCompletion.fecharModal();">
            <span class="glyphicon glyphicon-chevron-left"></span>
            Voltar
        </button>

        <button type="button" class="btn btn-success"
            ng-if="vm.ManualCompletion.ALTERANDO_ITENS == 1 && vm.Registro.ITENS_GRAVAR.length > 0"
            ng-click="vm.ManualCompletion.registrarEtapaMultiplosTaloes()"
            data-loading-text="Confirmando informações e gravando . . .">
            <span class="glyphicon glyphicon-ok"></span>
            Gravar produção
        </button>

        <button type="button" class="btn btn-danger" data-dismiss="modal" data-hotkey="esc"
            ng-if="vm.ManualCompletion.ALTERANDO_ITENS == 1  && vm.Registro.ITENS_GRAVAR.length > 0"
            ng-click="vm.ManualCompletion.ALTERANDO_ITENS = 0; vm.Registro.ITENS_GRAVAR = []; vm.ManualCompletion.mainFilter();">
            <span class="glyphicon glyphicon-ban-circle"></span>
            Cancelar
        </button>
    @overwrite

    @section('modal-body')

        <div id="filtro_main" class="table-filter"
            style="
                    margin-bottom: 4px;
                    display: flex;
                    flex-wrap:wrap;
                    align-items: start;
                    justify-content: flex-start;
                    gap: 20px;
                    background: rgba(221,221,221,.33);
                    padding: 6px 17px;
                    border-radius: 5px;
                    width: 100%;
                    ">
            {{-- <div class="form-group" style="margin-bottom: 4px; display:flex; flex-direction: column;">
                <label> Status</label>
                <select class="form-control filter_main ng-pristine ng-valid ng-not-empty ng-touched"
                    ng-model="vm.ManualCompletion.FILTRO_DADOS">
                    <option value="1" selected="selected">Em aberto</option>
                    <option value="0">Finalizados</option>
                    <option value="">Todos</option>
                </select>
            </div> --}}
            <div class="form-group">
                <label>Período de produção:</label>
                <div class="form-group"
                    style="display: flex; margin: 0; width: calc(28%);
								min-width: fit-content;
								max-width: fit-content;">
                    <input type="date" style="width: 130px;" class="form-control filter_main" ng-atalho
                        ng-model="vm.ManualCompletion.DATE_FILTRO.DATA_1" id="date_controll_class_Start"
                        form-validate="true" required>
                    <label style="padding-top: 5px; padding-right: 5px; padding-left: 5px; font-weight: bold;"> à
                    </label>
                    <input type="date" style="width: 130px;" class="form-control filter_main" ng-atalho
                        ng-model="vm.ManualCompletion.DATE_FILTRO.DATA_2" id="date_controll_class_End" form-validate="true"
                        required>
                </div>
                {{-- <div style="display: flex;align-items: flex-start;justify-content: right;gap: 10px;">
                    <input type="checkbox" ng-model="vm.confProd.SET_PERIODO"
                        class="ng-pristine ng-valid ng-empty ng-touched"
                        style="width: 10px;position: relative;display: flex;top: -5px;">
                    <p
                        style="display: flex;flex-direction: column;align-items: center;height: fit-content;justify-content: end;">
                        usar data</p>
                </div> --}}
            </div>
            <div style="display: -webkit-inline-box; height: 49px;" class="consulta-fornecedores consulta-fornec-box"></div>
            <div class="form-group" style="display: flex; flex-direction: column">
                <label>Busca:</label>
                <input type="text" id="chave_de_acesso" placeholder="Filtragem rápida"
                    class="form-control input-maior filter_main" ng-model="vm.ManualCompletion.FILTRO_DADOS"
                    form-validate="true">
            </div>
            <div class="form-group">
                <label>Quantidade de peças</label>
                <div style="display: flex;align-items: center;width: 19vw;gap: 6px;">
                    @foreach ([0, 1, 2, 3, 4, 5, 6, 7] as $item)
                        <div class="itm" style="display: flex; align-items: end; gap: 2px;">
                            <input checked="vm.ManualCompletion.DATA_QUERY.CLOTH_PART_{{ $item }}"
                                ng-model="vm.ManualCompletion.DATA_QUERY.CLOTH_PART_{{ $item }}" type="checkbox"
                                style="position: static;">
                            <strong>{{ $item }}</strong>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="form-group"
                style="padding-top: 14px;width: fit-content;padding-right: 10px;position: relative;right: -71px;">
                <button type="submit" class="btn btn-xs btn-primary btn-filtrar" data-hotkey="enter" id="btn-table-filter"
                    style="margin-top: 9px;">
                    <span class="glyphicon glyphicon-filter"></span> Filtrar
                </button>
            </div>
        </div>

        <ul id="tab" class="nav nav-tabs" role="tablist">
            {{-- <li role="presentation" class="active tab-detalhamento" ng-click="vm.ManualCompletion.focoTabela0()"
                title="Aba da conferência e ManualCompletion dos produtos - tecidos">
                <a href="#tab0-container" id="tab0-tab" data-hotkey="alt+1" role="tab" data-toggle="tab"
                    style="line-height: 1.558571 !important;" aria-controls="tab0-container" aria-expanded="true">
                    Visão geral @{{ vm.ManualCompletion.CAMPO_INDEX }}
                </a>
            </li> --}}
            {{-- @foreach (['3 etapas', '4 etapas', '5 etapas', '6 etapas', '7 etapas'] as $key => $item) --}}
            <li role="presentation" class="@{{ key == 0 ? 'active' : '' }} tab-detalhamento"
                ng-repeat="(key, ETAPA) in vm.ManualCompletion.ABAS_ETAPA"
                title="Aba do detalhamento da ManualCompletion dos produtos - tecidos">
                <a href="#tab@{{ key + 1 }}-container" id="tab@{{ key + 1 }}-tab"
                    title="@{{ vm.ManualCompletion.GRUPOS_DE_ETAPAS[ETAPA].ETAPAS_HELP_TITLE }}" data-hotkey="alt+@{{ key + 2 }}" role="tab" data-toggle="tab"
                    ng-click="vm.confProdProdutosPesados.consultar();" style="line-height: 1.558571 !important;"
                    aria-controls="tab@{{ key + 1 }}-container" aria-expanded="false">@{{ ETAPA }}
                    etapas<span style="margin-left: 2px;" class="btn btn-xs btn-default glyphicon glyphicon-refresh"
                        title="Carregar informações da tabela" ng-click="vm.ManualCompletion.mainFilter()"></span>
                </a>
            </li>
            {{-- @endforeach --}}
        </ul>
        <div id="tab-content" class="tab-content" style="height: calc(100vh - 300px)">
            {{-- <div role="tabpanel" class="tab-pane active in" id="tab0-container" name=""
                aria-labelledby="tab0-tab" style="height: 100%; overflow:auto;">
                <br>

                GERAL

            </div> --}}

            <div ng-repeat="(key, ETAPA) in vm.ManualCompletion.ABAS_ETAPA" role="tabpanel"
                class="tab-pane @{{ key == 0 ? 'active in' : '' }}" id="tab@{{ key + 1 }}-container" name=""
                aria-labelledby="tab@{{ key + 1 }}-tab" style="height: 100%; overflow:auto;">
                {{-- @{{ item }} --}}
                <h3>Talões com @{{ ETAPA }} etapas</h3>
                <div class="table-ec table-scroll" style="width: 100%; height: calc(100vh - 420px);  margin-top: 10px;">
                    <table class="table table-striped table-bordered table-condensed table-hover table-no-break">
                        <thead>

                            <tr>
                                <th class="top-fixed" style="text-align: start;"></th>
                                <th class="top-fixed" style="text-align: start;"></th>
                                <th class="top-fixed" style="text-align: start;"></th>
                                <th class="top-fixed" style="text-align: start;"></th>
                                <th class="top-fixed" style="text-align: start;"></th>
                                <th class="top-fixed" style="text-align: start;"></th>
                                <th class="top-fixed" style="text-align: start;"></th>
                                <th class="top-fixed" style="text-align: start;"></th>
                                <th class="top-fixed" style="text-align: start;"></th>
                                <th class="top-fixed" style="text-align: end; "></th>
                                <th class="top-fixed" style="text-align: end; "
                                    ng-repeat="descEtapa in vm.ManualCompletion.GRUPOS_DE_ETAPAS[ETAPA].ETAPAS_DESC_ARR">
                                    @{{ descEtapa }}
                                </th>
                            </tr>
                            <tr>
                                <th class="top-fixed-two" style="text-align: start;"></th>
                                <th class="top-fixed-two" style="text-align: start;">Remessa</th>
                                <th class="top-fixed-two" style="text-align: start;">Talão Dt. <span
                                        class="glyphicon glyphicon-info-sign" title="Talão detalhado"></span></th>
                                <th class="top-fixed-two" style="text-align: start;">Talão Ac. <span
                                        class="glyphicon glyphicon-info-sign" title="Talão acumulado"></span></th>
                                <th class="top-fixed-two" style="text-align: start;">Conjunto</th>
                                <th class="top-fixed-two" style="text-align: start;">Modelo</th>
                                <th class="top-fixed-two" style="text-align: start;">Cor</th>
                                <th class="top-fixed-two" style="text-align: start;">Cor origem</th>
                                <th class="top-fixed-two" style="text-align: start;">Tamanho</th>
                                <th class="top-fixed-two" style="text-align: end; ">Quantidade</th>
                                <th class="top-fixed-two" style="text-align: center; "
                                    ng-repeat="idEtapa in vm.ManualCompletion.GRUPOS_DE_ETAPAS[ETAPA].ETAPAS_ID_ARR">

                                    <button title="Marcar todos" type="button" class="btn btn-primary"
                                        ng-click="vm.Registro.marcarTodos(vm.ManualCompletion.GRUPOS_DE_ETAPAS[ETAPA], idEtapa)"
                                        style="width: 20px; height: 25px;" {{-- ng-if="vm.Registro.ativarMarcarTodos(vm.ManualCompletion.GRUPOS_DE_ETAPAS[ETAPA], idEtapa)" --}}>
                                        <span class="glyphicon glyphicon-ok"
                                            style="position: absolute;
                                                    top: 50%;
                                                    left: 50%;
                                                    transform: translate(-50%,-50%);"></span>
                                    </button>
                                    <button title="Desmarcar todos" type="button" class="btn btn-danger"
                                        ng-click="vm.Registro.desmarcarTodos(vm.ManualCompletion.GRUPOS_DE_ETAPAS[ETAPA], idEtapa)"
                                        style="width: 20px; height: 25px;" {{-- ng-if="vm.Registro.ativarMarcarTodos(vm.ManualCompletion.GRUPOS_DE_ETAPAS[ETAPA], idEtapa)" --}}>
                                        <span class="glyphicon glyphicon-remove"
                                            style="position: absolute;
                                                    top: 50%;
                                                    left: 50%;
                                                    transform: translate(-50%,-50%);"></span>
                                    </button>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="odd"
                                ng-repeat="item in vm.ManualCompletion.GRUPOS_DE_ETAPAS[ETAPA].TALOES track by $index"
                                tabindex="0" {{-- ng-focus="vm.Producao.consultarDetalhamento(item)" --}}
                                ng-class="{ 'selected' : vm.Producao.TALAO_SELECTED == item }">

                                <td class="t-status status@{{ item.STATUS }}"></td>
                                <td class="" style="text-align: start;">@{{ item.REMESSA }}</td>
                                <td class="" style="text-align: start;">@{{ item.TALAO_DETALHE_ID }}</td>
                                <td class="" style="text-align: center;">@{{ item.REMESSA_ACUMULADO_CONTROLE }}</td>
                                <td class="" style="text-align: start;">@{{ item.PECA_CONJUNTO }} /
                                    @{{ item.PECA_CONJUNTO_NUM }}</td>
                                {{-- <td class="" style="text-align: start;">@{{ item.REMESSA_TALAO_DETALHE_ID }}</td> --}}
                                <td class="" style="text-align: start;">@{{ item.MODELO }}</td>
                                <td class="" style="text-align: start;">@{{ item.COR }}</td>
                                <td class="" style="text-align: start;">@{{ item.COR_DESCRICAO }}</td>
                                <td class="" style="text-align: center;">@{{ item.TAMANHO_DESCRICAO }}</td>
                                <td class="" style="text-align: end;  ">@{{ item.QUANTIDADE_PRODUCAO | number: 2 }} PÇS</td>
                                {{-- <td class="" style="text-align: end;  ">@{{ item.TEMPO_PREVISTO | number: 0 }} min</td> --}}
                                <td ng-repeat="etapa in item.ETAPAS" style="max-width: 54px;">

                                    <div ng-if="vm.Registro.OPERADOR.UPN.includes(etapa.SETOR_ID)"
                                        ng-click="etapa.SITUACAO_ORIGINAL == 1 ? '' : vm.Registro.mudarSituacao(item, etapa);"
                                        style="text-align: center; cursor: pointer;">
                                        {{-- <div ng-click="etapa.SITUACAO_ORIGINAL == 1 ? '' : vm.Registro.mudarSituacao(item, etapa);"
                                        style="text-align: center; cursor: pointer;"> --}}
                                        <span ng-if="etapa.SITUACAO_ORIGINAL == 0 && etapa.SITUACAO == 1"
                                            title="Opção: registrando produção"
                                            style="text-align: center;
                                                    padding: 4px;
                                                    padding-bottom: 8px;
                                                    cursor: pointer;
                                                    color: green;"
                                            class="glyphicon glyphicon-ok"></span>

                                        <span ng-if="etapa.SITUACAO_ORIGINAL == 0 && etapa.SITUACAO == 0"
                                            title="Opção: NÃO registrando produção"
                                            style="text-align: center;
                                                    padding: 4px;
                                                    padding-bottom: 8px;
                                                    cursor: pointer;
                                                    color: red;"
                                            class="glyphicon glyphicon-remove"></span>
                                    </div>

                                    <div ng-if="!vm.Registro.OPERADOR.UPN.includes(etapa.SETOR_ID)"
                                        title="Operador sem Permissão" style="text-align: center;">
                                        <span ng-if="etapa.SITUACAO_ORIGINAL == 0"
                                            style="text-align: center;
                                                    padding: 4px;
                                                    padding-bottom: 8px;
                                                    color: red;"
                                            class="glyphicon glyphicon-ban-circle"></span>
                                    </div>

                                    <div ng-if="etapa.SITUACAO_ORIGINAL == 1" style="text-align: center;"
                                        title="Talão produzido">
                                        <span
                                            style="text-align: center;
                                                    padding: 4px;
                                                    padding-bottom: 8px;
                                                    color: blue;"
                                            class="glyphicon glyphicon-asterisk"></span>
                                    </div>

                                    {{-- <div ng-if="etapa.PERMICAO == 1 && etapa.SITUACAO_ORIGINAL == 0"
                                        style="text-align: center;">
                                        <span
                                            style="text-align: center;
                                                    padding: 4px;
                                                    padding-bottom: 8px;
                                                    color: blue;"
                                            class="glyphicon glyphicon-tags"></span>
                                    </div> --}}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div ng-if="vm.ManualCompletion.GRUPOS_DE_ETAPAS[ETAPA].TALOES.length > 0" style="display: inline-block;"
                    class="ng-scope">
                    <div class="tag-tab" style="padding: 3px;"><span><strong>Qtd. de Registros:</strong>
                            <span>@{{ vm.ManualCompletion.GRUPOS_DE_ETAPAS[ETAPA].TALOES.length }}</span></span></div>
                    <div class="tag-tab"><span
                            style="text-align: center; padding: 4px; padding-bottom: 8px; color: green;"
                            class="glyphicon glyphicon-ok"></span><span>Registrar Produção</span></div>
                    <div class="tag-tab"><span style="text-align: center; padding: 4px; padding-bottom: 8px; color: red;"
                            class="glyphicon glyphicon-remove"></span><span>NÃO Registrar Produção</span></div>
                    <div class="tag-tab"><span style="text-align: center; padding: 4px; padding-bottom: 8px; color: blue;"
                            class="glyphicon glyphicon-asterisk"></span><span>Produzido</span></div>
                    {{-- <div class="tag-tab"><span style="text-align: center; padding: 4px; padding-bottom: 8px; color: blue;"
                            class="glyphicon glyphicon-tags"></span><span>Conferência de Peças</span></div> --}}
                    <div class="tag-tab"><span style="text-align: center; padding: 4px; padding-bottom: 8px; color: red;"
                            class="glyphicon glyphicon-ban-circle"></span><span>Operador sem Permissão/Não Logado</span>
                    </div>
                </div>

                {{-- @include('ppcp._22609.index.tabela.tabela-personalizada', ['etapa'=>@{{ key }}]) --}}
            </div>
        </div>

    @overwrite

    @section('modal-end')
    </form>
@overwrite