@extends('master')

@section('titulo')
    {{ Lang::get('ppcp/_22136.titulo') }}
@endsection

@section('estilo')
    <link rel="stylesheet" href="{{ elixir('assets/css/22136.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" id="filtrar-toggle" data-toggle="collapse"
                    data-target="#filtro_main" aria-expanded="true" aria-controls="filtro_main"
                    ng-click="vm.Reprogramacao.tabela_height()">
                    Filtro
                    <span class="caret"></span>
                </button>
            </li>
        </ul>

        <form ng-submit="vm.Reprogramacao.filtrar()" class="form-inline form-filtrar">
            <div id="filtro_main" class="table-filter collapse in" aria-expanded="true"
                style="margin-bottom: 4px;
					background: rgba(221,221,221,.33);
					padding: 2px 10px 7px;
					border-radius: 5px;">

                <div class="consulta-estabelecimento"></div>
                <!--
           <div class="form-group">
            <label>Subtipo Grupo:</label>
            <div class="input-group">
             <select
              name="repeatSelect"
              id="repeatSelect"
              ng-model="vm.Reprogramacao.FILTRO.SUB_TIPO_GP"
              required>

              <option ng-repeat="tipo in vm.Reprogramacao.LISTA_GP" ng-value="tipo.ID">@{{ tipo.ID_DESC }}  - @{{ tipo.DESCRICAO }}</option>
             </select>
            </div>
           </div>
           -->
                <div class="consulta-gp"></div>
                <div class="consulta-up"></div>

                <div class="form-group filtro-periodo">
                    <label>Período:</label>
                    <input type="date"
                        ng-change="vm.Reprogramacao.formatarData(vm.Reprogramacao.FILTRO.DATA_INICIAL, 'DATA_INICIAL')"
                        ng-disabled="vm.Reprogramacao.FILTRO.FLAG_DATA" ng-model="vm.Reprogramacao.FILTRO.DATA_INICIAL"
                        class="form-control data-ini dt1" value="{{ date('Y-m-d') }}" />
                    <label class="periodo-a"> {{ Lang::get('master.periodo-a') }} </label>
                    <input type="date"
                        ng-change="vm.Reprogramacao.formatarData(vm.Reprogramacao.FILTRO.DATA_FINAL  , 'DATA_FINAL')"
                        ng-disabled="vm.Reprogramacao.FILTRO.FLAG_DATA" ng-model="vm.Reprogramacao.FILTRO.DATA_FINAL"
                        class="form-control data-fim dt2" value="{{ date('Y-m-d') }}" />
                </div>

                <div class="form-group" style="padding-top: 12px; width: fit-content; padding-right: 10px;">
                    <button type="submit" class="btn btn-xs btn-primary btn-filtrar" data-hotkey="alt+f"
                        id="btn-table-filter" style="top: 2px;">
                        <span class="glyphicon glyphicon-filter"></span> Filtrar
                    </button>
                </div>
            </div>
        </form>

        <div ng-repeat="gp in vm.Reprogramacao.LISTA_GPS" class="panel panel-primary"
            style="margin-bottom: 5px !important; margin-top: 3px;">
            <div class="panel-heading collapsed" style="height: 30px; cursor: pointer !important;" tabindex="-1"
                data-hotkey="alt+1" id="containerServidor" data-toggle="collapse" data-target="#painelServidor"
                aria-expanded="true" aria-controls="painelServidor" ng-click="vm.changePainel('servidor');">
                <h3 style="font-size: 14px; margin-top: 3px;" class="panel-title">@{{ gp.DESCRICAO }} <sub>(Alt+1)</sub>
                    <i class="fa fa-chevron-circle-down" style="float: right; cursor: pointer; margin-top: 0px;"
                        ng-class="{'fa-chevron-circle-down': !vm.ABA_SERVIDOR, 'fa-chevron-circle-up': vm.ABA_SERVIDOR}"
                        aria-hidden="true">
                    </i>
                </h3>
            </div>
            <div class="panel-body collapse" id="painelServidor" aria-expanded="false" style="height: 30px;">

                <div class="item-gp" ng-repeat="gp in vm.Reprogramacao.LISTA_GPS">
                    <div style="font-weight: bold; margin-bottom: 3px; display: flex;" class="desc-gp">
                        <input id="itemgp" type="checkbox" ng-checked="gp.MARCADO == '1'" ng-true-value="'1'"
                            ng-false-value="'0'" ng-click="vm.Reprogramacao.marcarGp(gp);">
                        <div style="margin-top: 4px; margin-left: 5px;"><label for="itemgp">@{{ gp.DESCRICAO }}</label>
                        </div>
                    </div>
                    <div class="lista-up">
                        <div class="item-up" ng-repeat="up in gp.UPS">
                            <div class="desc-gp" style="display: flex; margin-bottom: 2px;">
                                <input id="itemup@{{ up.ID }}" type="checkbox" ng-checked="up.MARCADO == '1'"
                                    ng-true-value="'1'" ng-false-value="'0'" ng-click="vm.Reprogramacao.marcarUp(up);">
                                <div style="margin-top: 4px; margin-left: 5px;"><label
                                        for="itemup@{{ up.ID }}">@{{ up.DESCRICAO }}</label></div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="row">
            <div class="panel panel-primary" style="margin: 15px; margin-top: 5px; margin-bottom: 0px;">
                <div class="panel-heading">
                    <h3 class="panel-title">Talões Programados</h3>
                </div>

                <div class="taloes-container up-container"
                    style="height: calc(100vh - 265px); overflow: auto; margin-bottom: 0px;">

                </div>

                <div class="taloes-container-temp" style="height: calc(100vh - 255px); overflow: auto; display: none;">

                    <div style="width: 100% !important; margin: 0px;" id="item-gp-@{{ gp.ID }}"
                        class="up-bloco gp-container" ng-repeat="gp in vm.Reprogramacao.LISTA_GPS"
                        ng-if="gp.MARCADO == 1">
                        <div class="estacao-container">
                            <div data-up="@{{ up.ID }}" data-up-descricao="@{{ up.DESCRICAO }}"
                                data-gp="@{{ gp.ID }}" data-gp-descricao="@{{ gp.DESCRICAO }}"
                                data-estacao="1" id="item-up-@{{ up.ID }}" class="estacao-bloco up-container"
                                ng-repeat="up in gp.UPS" ng-if="up.MARCADO == 1">
                                <label>UP: @{{ up.ID }} - @{{ up.DESCRICAO }}</label>
                                <br>

                                <div class="acoes-estacao" style="float: left;">
                                    <div
                                        style="padding: 3px 5px 0px 5px;
											background-color: #377bb5;
											color: #ffffff;
											border-radius: 7px;">
                                        <label>Qtd.:</label> <span>@{{ up.TOTAL_QTD | number: 0 }}</span> |
                                        <label>Minutos:</label> <span>@{{ up.TOTAL_TEMPO | number: 2 }}</span> |
                                        <label>Horas:</label> <span>@{{ (up.TOTAL_TEMPO / 60) | number: 2 }}</span>
                                    </div>

                                    <div id="@{{ up.ID }}-totalizador-marcado"
                                        style="display: none; 
																	padding: 3px 5px 0px 5px; 
																	background-color: #030303; 
																	color: #ffff00; 
																	border-radius: 7px; 
																	margin-top: 1px;">
                                        <label>Qtd.:</label> <span
                                            id="@{{ up.ID }}-totalizador-marcado-total-qtd-selec"></span> |
                                        <label>Minutos:</label> <span
                                            id="@{{ up.ID }}-totalizador-marcado-total-tempo1-selec"></span> |
                                        <label>Horas:</label> <span
                                            id="@{{ up.ID }}-totalizador-marcado-total-tempo2-selec"></span>
                                    </div>
                                </div>

                                <div class="acoes-estacao" style="float: right;">
                                    <button type="button" class="btn btn-xs btn-default up-marcar-todos-exec">
                                        <span class="glyphicon glyphicon-ok"></span> Marcar Todos
                                    </button>

                                    <button type="button" class="btn btn-xs btn-default up-desmarcar-todos-exec">
                                        <span class="glyphicon glyphicon-remove"></span> Desmarcar Todos
                                    </button>

                                    <button type="button" class="btn btn-xs btn-default btn-reprogramar-para" disabled>
                                        <span class="glyphicon glyphicon-calendar"></span> Reprogramar para...
                                    </button>
                                </div>

                                <table class="table table-striped table-bordered table-hover estacao">
                                    <thead>
                                        <tr>
                                            <th class="checkbox-talao"></th>
                                            <th></th>
                                            <th class="text-center ">Remessa - Talão</th>
                                            <th class="text-center ">Dt. Rem.</th>
                                            <th class="text-left   ">Modelo</th>
                                            <th class="text-left   ">Cor</th>
                                            <th class="text-center ">Tam.</th>
                                            <th class="text-right  ">Qtd. Proj. </th>
                                            <th class="text-right  ">Tempo</th>
                                            <th class="text-center ">Data Inicial</th>
                                            <th class="text-center ">Data Final</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr id="item-talao-@{{ talao.REMESSA }}-@{{ talao.TALAO_DETALHE_ID }}"
                                            class="itens-marck-taloes" ng-repeat="talao in up.TALOES" class="">
                                            <td class="checkbox-talao"><input class="checkbox-itens" type="checkbox"
                                                    name="talao"> </td>
                                            <td class="t-status text-center status-@{{ talao.STATUS }}"></td>
                                            <td class="text-center">@{{ talao.REMESSA }} - @{{ talao.TALAO_DETALHE_ID }} </td>
                                            <td class="text-center">@{{ talao.REMESSA_DATAF }} </td>
                                            <td class="text-left  "
                                                style="min-width: 200px;
													max-width: 200px;
													text-align: left;
													overflow: hidden;
													text-overflow: ellipsis;
													white-space: nowrap;">
                                                @{{ talao.MODELO_ID }} - @{{ talao.MODELO_DESCRICAO }}</td>
                                            <td class="cor-amostra"
                                                style="min-width: 100px;
													max-width: 100px;
													text-align: left;
													overflow: hidden;
													text-overflow: ellipsis;
													white-space: nowrap;">
                                                <span ng-if="talao.COR_IMAGEM == null && (talao.CORES).length > 0" class="color-view-136"
                                                    style="background-image:  linear-gradient(to right top, @{{ talao.CORES[0].COR_HEX }} 45% ,@{{ talao.CORES[1].COR_HEX }} 55%) ;display: block;width: 2em;height: 10px;float: left; border-radius: 4px; box-shadow: -1px 1px 3px 0px black; margin-right: 2px;">
                                                </span>
                                                <span ng-if="talao.COR_IMAGEM == null" class="color-view-136"
                                                    style="background-color: @{{ talao.COR_HEX }} /* linear-gradient(to right top, @{{ talao.COR_HEX }} 45% , red 55%) */;display: block;width: 2em;height: 10px;float: left; border-radius: 4px; box-shadow: -1px 1px 3px 0px black; margin-right: 2px;">
                                                </span>
                                                <span ng-if="talao.COR_IMAGEM != null && !((talao.CORES).length > 0)" class="color-view-136"
                                                    style="background-image: url('@{{ talao.COR_IMAGEM }}');background-position: center;background-size: cover;display: block;width: 2em;height: 10px;float: left; border-radius: 2px; box-shadow: -1px 1px 3px 0px black; margin-right: 2px;">
                                                </span>
                                                <span class="descricao">
                                                    @{{ talao.COR_ID }} - @{{ talao.COR_DESCRICAO }}
                                            </td>
                                            <td class="text-center">@{{ talao.TAMANHO }} </td>
                                            <td class="text-right ">@{{ talao.QUANTIDADE | number: 2 }} </td>
                                            <td class="text-right ">@{{ talao.TEMPO | number: 2 }} </td>
                                            <td class="text-center">@{{ talao.DATAHORA_INICIOF }} </td>
                                            <td class="text-center">@{{ talao.DATAHORA_FIMF }} </td>

                                            <input type="hidden" class="_data-programacao"
                                                value="@{{ talao.PROGRAMACAO_DATA }}" />
                                            <input type="hidden" class="_data-inicio" value="@{{ talao.DATAHORA_INICIO_2 }}"
                                                data-data-inicial="@{{ talao.DATAHORA_FIM_2 }}" />
                                            <input type="hidden" class="_talao-id" value="@{{ talao.TALAO_DETALHE_ID }}" />
                                            <input type="hidden" class="_talao-acumulado-id"
                                                value="@{{ talao.TALAO_CUMULADO_ID }}" />
                                            <input type="hidden" class="_remessa-id" value="@{{ talao.REMESSA_ID }}" />
                                            <input type="hidden" class="_remessa-talao-id"
                                                value="@{{ talao.REMESSA_TALAO_ID }}" />
                                            <input type="hidden" class="_programacao-id"
                                                value="@{{ talao.PROGRAMACAO_ID }}" />
                                            <input type="hidden" class="_up-id" value="@{{ talao.UP_ID }}" />
                                            <input type="hidden" class="_estacao" value="@{{ talao.ESTACAO }}" />
                                            <input type="hidden" class="_gp-id" value="@{{ talao.GP_ID }}" />
                                            <input type="hidden" class="_gp-descricao"
                                                value="@{{ gp.DESCRICAO }}" />
                                            <input type="hidden" class="_estabelecimento-id"
                                                value="@{{ talao.ESTABELECIMENTO_ID }}" />

                                        </tr>
                                    </tbody>
                                </table>

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

        @include($menu . '.modal.Reprogramacao')
        @include($menu . '.modal.ReprogramacaoItens')
        @include($menu . '.modal.ReprogramacaoImpressao')

        @include($menu . '.modal.ConfirmItensSelected')
    </div>
@endsection

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