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

@section('modal-header-left')

<h4 class="modal-title">
    Detalhamento do Talão
</h4>

@overwrite

@section('modal-header-right')

    <div style="display: inline-block; margin-right: 30px;">
        <label class="label_checkbox1" for="radio4p1">Confirmar Talões</label>
        <input
            style="margin-top: 1px; position: absolute; margin-left: 3px;"
            id="radio4p1"
            type="checkbox" 
            ng-true-value="'1'"
            ng-false-value="'0'"
            name="NormalAlterado1"
            ng-model="vm.TalaoProduzir.confirmar_taloes">
    </div>
                        
    <a class="btn btn-default" style="background-color: #cefcce;" ng-click="vm.winPopUp('/_22580?TAG=1&GP='+vm.ConsultaGp.GP_ID,'conferencia-placa',{width:950,height:680})">
        <span class="fa fa-tasks"></span>
        22580 - Confe. de Placas
    </a>

    <button ng-click="vm.Filtro.consultar()" type="button" class="btn btn-default hotkey-no-label">
        <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> Atualizar
    </button>
	
	<button type="button" class="btn btn-default btn-fechar-modal btn-voltar" ng-click="vm.TalaoDetalhe.fecharModalProducao()" data-hotkey="esc">
        <span class="glyphicon glyphicon-chevron-left"></span> Voltar
    </button>	

@overwrite

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

    @include('ppcp._22190.index.panel-destaque')  

    <div
        ng-if="vm.TalaoProduzir.check('iniciar').descricao != '' && vm.TalaoProduzir.SELECTED.PROGRAMACAO_STATUS != 2" 
        class="panel panel-danger modal-header-center" 
        style="
        display: block;
        position: absolute;
        width: 378px;
        top: 47px;
        overflow: hidden;
        background: rgb(169, 15, 15);
        margin: 0 auto;
        /* left: 0; */
        /* right: 0; */
        text-align: center;
        color: white;
        font-weight: bold;
    ">Atenção: @{{ vm.TalaoProduzir.check('iniciar').descricao }}</div>    

    <div
        ng-if="vm.TalaoProduzir.check('finalizar').descricao != '' && vm.Talao.SELECTED.PROGRAMACAO_STATUS == 2" 
        class="panel panel-danger modal-header-center" 
        style="
        display: block;
        position: absolute;
        width: 378px;
        top: 47px;
        overflow: hidden;
        background: rgb(169, 15, 15);
        margin: 0 auto;
        /* left: 0; */
        /* right: 0; */
        text-align: center;
        color: white;
        font-weight: bold;
    ">Atenção: @{{ vm.TalaoProduzir.check('finalizar').descricao }}</div>    

    <div style=" height: 55px; ">
        <button 
            type="button" 
            class="btn btn-success" 
            id="iniciar" 
            data-hotkey="home"
            ng-disabled="!vm.TalaoProduzir.check('iniciar').status"            
            ng-click="vm.TalaoProduzir.acao('iniciar')"
            style="font-size: 17px;"
            >
            <span class="glyphicon glyphicon-play"></span> {{ Lang::get('master.iniciar') }}
        </button>

        <button 
            type="button" 
            class="btn btn-primary" 
            id="pausar" 
            data-hotkey="pause"
            ng-disabled="!vm.TalaoProduzir.check('pausar').status"            
            ng-click="vm.TalaoProduzir.acao('pausar')"
            style="font-size: 17px;"
            >
            <span class="glyphicon glyphicon-pause"></span> {{ Lang::get('master.pausar') }}
        </button>

        <button 
            type="button" 
            class="btn btn-danger" 
            id="finalizar" 
            data-hotkey="end"
            ng-disabled="!vm.TalaoProduzir.check('finalizar').status"            
            ng-click="vm.TalaoProduzir.acao('finalizar')"
            style="font-size: 17px;"
            >
            <span class="glyphicon glyphicon-stop"></span> {{ Lang::get('master.finalizar') }}
        </button>

        <button 
            type="button" 
            class="btn btn-warning" 
            id="finalizar" 
            data-hotkey="alt+p"
            ng-if="vm.Talao.SELECTED.PROGRAMACAO_STATUS == 3"           
            ng-click="vm.TalaoProduzir.print('finalizar')"
            style="font-size: 17px;"
            >
            <span class="glyphicon glyphicon-print"></span> Imprimir
        </button>

    </div>

    <table style="margin-top: 10px !important;" class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>Remessa</th>
                <th class="text-center">Talão</th>
                <th>Modelo</th>
                <th class="text-center">Tam.</th>
                <th class="text-right">Qtd.</th>
                <th class="text-right">Qtd. Alt.</th>
                <th class="text-right" ttitle="Informações de Origem">Inf.Orig.</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <a ttitle="Id da remessa: @{{ vm.Talao.SELECTED.REMESSA_ID }} <br/>Clique aqui para consultar a remessa deste talão" href="{{ url('/_22120?remessa=') }}@{{ vm.Talao.SELECTED.REMESSA_PRINCIPAL }}" target="_blank">
                    @{{ vm.Talao.SELECTED.REMESSA }}
                    </a>
                </td>
                <td class="text-center" title="Id: @{{ vm.Talao.SELECTED.TALAO_ID }}">@{{ vm.Talao.SELECTED.REMESSA_TALAO_ID }}</td>
                <td>@{{ vm.Talao.SELECTED.MODELO_ID }} - @{{ vm.Talao.SELECTED.MODELO_DESCRICAO }}</td>
                <td class="text-center" title="Grade Id: @{{ vm.Talao.SELECTED.GRADE_ID }} - Tamanho Id: @{{ vm.Talao.SELECTED.TAMANHO }}">@{{ vm.Talao.SELECTED.TAMANHO_DESCRICAO }}</td>
                <td class="text-lowercase text-right">@{{ vm.Talao.SELECTED.QUANTIDADE_PROJETADA | number : 0 }} @{{ vm.Talao.SELECTED.UM }}</td>
                <td class="text-lowercase text-right">@{{ vm.Talao.SELECTED.QTD_ML | number:2 }} @{{ vm.Talao.SELECTED.UM2 }}</td>
                
                <td class="text-right text-lowercase" style="width: 100px;">

                    <span
                        class="vinculo-modelos2 ng-scope"
                        ttitle="Modelos de Origem"
                        ng-click="vm.Talao.consultarVinculoModelos(vm.Talao.SELECTED.TALAO_ID, $event); $event.stopPropagation();"
                        data-toggle="tooltip"
                        data-base-title="Modelos de Origem"
                        data-original-title="Modelos de Origem"
                        aria-describedby="tooltip688015">M</span>

                    <span
                        class="glyphicon glyphicon-info-sign ng-scope"
                        data-toggle="popover"
                        data-placement="left"
                        title=""
                        style="font-size: 29px; margin-right: 20px; float: right;"
                        data-element-content="#info-origem-@{{vm.Talao.SELECTED.TALAO_ID}}"
                        on-finish-render="bs-init"
                        ng-class="sequencia-producao"
                        data-original-title="Informações"></span>

                    <div id="info-origem-@{{vm.Talao.SELECTED.TALAO_ID}}" style="display: none">
                        <div class="origem-container">
                            <fieldset>
                                <legend style="font-size: 12px; font-weight: bold;">Quantidades por GP</legend>
                                <table class="table table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th class="text-left">GP</th>
                                            <th class="text-left">Qtd.</th>
                                            <th class="text-left">Observação</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="item in vm.Talao.SELECTED.PARES_POR_GP.split(',')">
                                            <td class="text-left" >@{{ item.split('/')[0] || '-' }}</td>
                                            <td class="text-right">@{{ item.split('/')[1] || '-' | number: 0 }}</td>
                                            <td class="text-right">@{{ item.split('/')[2] }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </fieldset>

                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
        
    <div class="tab-registros"> 
        
        <div class="group-tab">
            <div class="tab-cores">
                <div  class="info-desc">Cores</div>
                <div class="cor-div" style="display: inline-flex; padding: 0px; width: 100%; font-size: 13px;">
                    <div ng-click="vm.Talao.marcarCorTodos(cor);" tabindex="0" class="cor-marcar" style="background-color: #9afc9a;">
                        Marcar Todos
                    </div>

                    <div ng-click="vm.Talao.desmarcarCorTodos(cor);" tabindex="0" class="cor-marcar" style="background-color: #fab1b1; border-left: 1px solid #dddddd;">
                        Desmarcar Todos
                    </div>
                </div>
                <div ng-repeat="cor in vm.Talao.SELECTED.CORES | orderBy : ['COR']"
                    ng-click="vm.Talao.marcarCor(cor);"
                    ng-class="{'selected' : cor.MARCADO == true }"
                    class="cor-div"
                    tabindex="0" 
                    >
                    (@{{(cor.QTD+'').padStart(2,'0')}}) - @{{ cor.COR }} 
                </div>
            </div>
            <div class="tab-requisicao">
            
                <button 
                    style="width: 100%;"
                    type="button" 
                    class="btn btn-primary" 
                    ng-disabled="vm.TalaoDetalhe.SELECTEDS.length == 0 || vm.Talao.SELECTED.REM_REQUISICAO == 1"
                    ng-click="vm.Requisicao.abrirModalRequisicao(vm.TalaoDetalhe.SELECTEDS, vm.Talao.SELECTED)"
                    > Registro de Requisição
                </button>

            </div>
        </div>

        <div class="tab-taloes">
            <div class="info-desc">Detalhamento dos Talões</div>
            <div class="tab-taloes2">
                <div ng-repeat="detalhe in vm.Talao.SELECTED.DETALHES | orderBy : ['COR']"
                    ng-click="vm.TalaoDetalhe.pick(detalhe)"
                    ng-class="{'selected' : vm.TalaoDetalhe.SELECTEDS.indexOf(detalhe) > -1 }"
                    class="talao-div  talao-status-@{{ detalhe.TALAO_DETALHE_STATUS }}"
                    tabindex="0" data-componente="@{{ detalhe.COMPONENTE }}" detalhe-id="@{{ detalhe.CONSUMO_ID }}"
                    ng-if="detalhe.PLACA == 0">
                    <div class="col1">TL: @{{ detalhe.ORIGEM }} TAM: @{{ detalhe.TAMANHO_DESCRICAO }}
                        <div style="float: right; width: 12px; height: 12px; border-radius: 9px; margin-right: 3px;" title="@{{(''+consumo.TALAO).padStart(4,'0')}}" ng-repeat="consumo in detalhe.LCONSUMOS | orderBy : ['TALAO']" class="status-componente-@{{consumo.COMPONENTE.ALOCADO}}"></div>
                        
                        <span  ng-if="detalhe.STATUS_REQUISICAO >= 0" style="float: right; margin-right: 6px; margin-top: -3px;" class="status_req_@{{detalhe.STATUS_REQUISICAO}}"
                        data-toggle="popover"
                        data-placement="bottom" 
                        title="" 
                        style="margin-left: 4px; color: #337ab7;" 
                        data-element-content="#info-alocado-1-@{{detalhe.REMESSA_TALAO_DETALHE_ID}}" 
                        on-finish-render="bs-init" 
                        data-original-title="Requisições">R</span>
                    
                    </div>
                    <div class="col2">@{{ detalhe.MODELO }} / @{{ detalhe.COR }}</div>
                    <div class="col3">QTD: @{{ detalhe.QUANTIDADE_PROJETADA }} @{{ detalhe.UM }} / @{{ detalhe.QUANTIDADE_PRODUCAO }} @{{ detalhe.UM }}</div>
                </div>
            </div>

            <div style="margin-top: 10px;" class="info-desc">Detalhamento dos Talões de Placa</div>
            <div class="tab-taloes3"
                    style=" padding: 2px;
                            height: 90px;
                            overflow-x: auto;
                            overflow-y: hidden;
                            white-space: nowrap;">
                <div ng-repeat="detalhe in vm.Talao.SELECTED.DETALHES | orderBy : ['COR']"
                    ng-click="vm.TalaoDetalhe.pick(detalhe)"
                    ng-class="{'selected' : vm.TalaoDetalhe.SELECTEDS.indexOf(detalhe) > -1 }"
                    class="talao-div talao-status-@{{ detalhe.TALAO_DETALHE_STATUS }}"
                    tabindex="0" data-componente="@{{ detalhe.COMPONENTE }}" detalhe-id="@{{ detalhe.CONSUMO_ID }}"
                    ng-if="detalhe.PLACA == 1">
                    <button 
                        type="button" 
                        style="width: 40px; height: 35px; float: right;"
                        id="registrar-componente2" 
                        class="btn btn-sm btn-warning" 
                        ng-click="vm.Talao.ImprimirPlaca(detalhe)"
                        ng-if="detalhe.PLACA == 1"
                        style="padding: 3px"
                        >
                        <span class="glyphicon glyphicon-print"></span>
                    </button>  
                    <div class="col1">TL: @{{ detalhe.ORIGEM }}
                        <div style="float: right; width: 12px; height: 12px; border-radius: 9px; margin-right: 3px;" title="@{{(''+consumo.TALAO).padStart(4,'0')}}" ng-repeat="consumo in detalhe.LCONSUMOS | orderBy : ['TALAO']" class="status-componente-@{{consumo.COMPONENTE.ALOCADO}}"></div>
                        
                        <span style="float: right; margin-right: 6px; margin-top: -3px;" class="status_req_@{{detalhe.STATUS_REQUISICAO}}"
                        data-toggle="popover"
                        data-placement="top" 
                        title="" 
                        style="margin-left: 4px; color: #337ab7;" 
                        data-element-content="#info-alocado-1-@{{detalhe.REMESSA_TALAO_DETALHE_ID}}" 
                        on-finish-render="bs-init" 
                        data-original-title="Requisições">R</span>
                    
                        
                        <div id="info-alocado-1-@{{detalhe.REMESSA_TALAO_DETALHE_ID}}" style="display: none">
                            <div class="origem-container">
                                <table class="table table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th class="text-left"></th>
                                            <th class="text-left">Tipo</th>
                                            <th class="text-left">Requisição</th>
                                            <th class="text-right">Qtd.</th>
                                            <th class="text-left">Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="req in detalhe.REQUISICAO">
                                            <td><span class="status_req_@{{req.STATUS_REQ}}">R</span></td>
                                            <td style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" class="text-center">@{{req.TIPO == 1 ? 'PLACA' : req.TIPO == 3 ? 'APROV.' : 'BOJO'}}</td>
                                            <td style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" class="text-left">@{{req.ID}}</td>
                                            <td style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" class="text-right">@{{req.QUANTIDADE | number:0}}</td>
                                            <td style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" class="text-left">@{{req.STATUS_DESCRICAO}}</td>
                                        </tr>
                                    </tbody>
                                </table> 
                            </div>
                        </div>
                    </div>
                    <div class="col2">@{{ detalhe.MODELO }} / @{{ detalhe.COR }}</div>
                    <div class="col3">QTD: @{{ detalhe.QUANTIDADE_PROJETADA }} @{{ detalhe.UM }} / @{{ detalhe.QUANTIDADE_PRODUCAO }} @{{ detalhe.UM }}</div>
                </div>
            </div>
        </div>

    </div>


    <div class="consumo"  style="display: inline-block;">
        <div 
            style="
            right: 138px;
            padding: 3px;
            display: inline-flex;
            "
            title="Talões vinculados">
            <div
            class="label label-default @{{componente.ALOCADO == 1 ? 'componentevinculado' : 'componentenaovinculado'}}" 
            style="
                margin-right: 5px;
                padding: 6px;
                padding-top: 1px;
                padding-bottom: 1px;
                right: 6px;
                height: 40px;
                padding-top: 7px;
                font-size: 16px;"
                ng-repeat="componente in vm.Talao.SELECTED.COMPONENTES">

                <label style="margin: 5px 0px;margin-bottom: 6px;">@{{ componente.REMESSA_TALAO_ID }} / @{{ componente.PROGRAMACAO_STATUS_DESCRICAO }}</label>
                
                <button 
                    style="width: 30px; height: 27px; margin-right: 0px;"
                    type="button" 
                    class="btn btn-danger btn-xs" 
                    ng-click="vm.TalaoConsumo.componenteAlocadoDelete(componente)"
                    ng-if="componente.ALOCADO == 1" 
                    ng-disabled="!vm.TalaoProduzir.check('pausar').status"
                    ttitle="Excluir alocação">x</button>
            </div>
        </div>        
        <button 
            type="button" 
            id="registrar-componente" 
            class="btn btn-sm btn-warning" 
            data-hotkey="Alt+C" 
            ng-disabled="!vm.TalaoProduzir.check('pausar').status" 
            ng-click="vm.TalaoConsumo.componenteModalOpen()"
            style="
                right: 0;
                padding: 3px;
                font-size: 16px;
                height: 40px;
            ">
                <span class="glyphicon glyphicon-edit"></span>
                Registrar Componente
            </button> 
    </div>

    <ul class="legenda" style="display: inline-block; float: none; padding: 5px; margin: 0px; font-size: 12px;">
        <li>
            <div class="texto-legenda">Status:</div>
        </li>   
		<li>
			<div class="cor-legenda detalhe-status-1"></div>
			<div class="texto-legenda">Em Aberto</div>
		</li>
		<li>
			<div class="cor-legenda detalhe-status-2"></div>
			<div class="texto-legenda">Produzido</div>
		</li>
		<li>
			<div class="cor-legenda detalhe-status-3"></div>
			<div class="texto-legenda">Liberado</div>
		</li>
		<li>
			<div class="cor-legenda detalhe-status-6"></div>
			<div class="texto-legenda">Encerrado</div>
		</li>
    </ul>

    <ul class="legenda" style="display: inline-block; float: none; padding: 5px; margin: 0px; font-size: 12px; margin-top: 10px; margin-left: 5px; padding-bottom: 3px;">
        <li>
            <div class="texto-legenda">Requisição:</div>
        </li>   
        <li>
            <span class="cor-legenda status_req_0" style="float: left; margin-top: -3px; margin-right: 3px;">R</span>
            <div class="texto-legenda"> - Pendente | </div>
        </li>
        <li>
            <span class="cor-legenda status_req_1" style="float: left; margin-top: -3px; margin-right: 3px;">R</span>
            <div class="texto-legenda"> - Produzida | </div>
        </li>
        <li>
            <span class="cor-legenda status_req_2" style="float: left; margin-top: -3px; margin-right: 3px;">R</span>
            <div class="texto-legenda"> - Encerrada</div>
        </li>
    </ul>
    
</div>
@overwrite