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

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

@section('modal-header-left')
    <h4 class="modal-title">
        22135 - Agrupamento de talões
    </h4>

@overwrite

@section('modal-header-right')
    <button type="button" class="btn btn-default btn-voltar" data-dismiss="modal" data-hotkey="esc">
        <span class="glyphicon glyphicon-chevron-left"></span>
        Voltar
    </button>
@overwrite

@section('modal-body')
    <div class="operation-container" style="height: calc(100vh - 90px);">
        <form ng-submit="vm.VincularTaloes.getItens()" class="form-inline">
            <div class="inp">
                <input type="text" form-validate="true" placeholder="Informe a remessa"
                    ng-model="vm.VincularTaloes.TEXT_REMESSA"
                    class="ng-pristine ng-empty ng-invalid ng-invalid-required ng-touched input-medio" required>
                
                <input type="text" form-validate="true" placeholder="Filtragem por modelo e cor"
                    ng-model="vm.VincularTaloes.TEXT_PESQUISA"
                    class="ng-pristine ng-empty ng-invalid ng-invalid-required ng-touched input-maior">

                <button type="submit" class="btn btn-primary" data-hotkey="enter">Filtrar</button>
            </div>
        </form>
        <div class="register-container">
            <div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
                <h3>Talões da remessa @{{ vm.VincularTaloes.TEXT_REMESSA }}</h3>
                <div>
                    <button ng-click="vm.VincularTaloes.postVicular()" class="btn btn-success"
                        ng-disabled="!vm.VincularTaloes.GROUP_SELECTED_TALOES.length > 0">Agrupar talões</button>
                    <button ng-click="vm.VincularTaloes.postDesvicular()" class="btn btn-danger"
                        ng-disabled="!vm.VincularTaloes.GROUP_SELECTED_TALOES.length > 0">Separar talões</button>
                    <button ng-click="vm.VincularTaloes.clearSelected()" class="btn btn-primary"
                        ng-show="vm.VincularTaloes.GROUP_SELECTED_TALOES.length > 0">Limpar seleção</button>
                    <button ng-click="vm.VincularTaloes.selectAll()" class="btn btn-primary"
                        ng-show="vm.VincularTaloes.GROUP_SELECTED_TALOES.length < vm.VincularTaloes.TLS.length">Marcar tudo</button>
                </div>
            </div>
            <div class="table-ec table-scroll" style="width: 100%; height: calc(100vh - 90px);  margin-top: 10px;">
                <table class="table table-striped table-bordered table-condensed table-hover table-no-break">
                    <thead>
                        <tr>
                            <th class="" style="text-align: start;"></th>
                            <th class="" style="text-align: start;">Remessa</th>
                            <th class="" style="text-align: start;">Talão</th>
                            <th class="" style="text-align: center;">Talão Ac.</th>
                            <th class="" style="text-align: start;">Modelo</th>
                            <th class="" style="text-align: start;">Cor</th>
                            <th class="" style="text-align: start;">Cor Origem</th>
                            <th class="" style="text-align: start;">Tam.</th>
                            <th class="" style="text-align: end;">Quantidade</th>
                            <th class="" style="text-align: center;">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="odd" ng-repeat="(key, talao) in vm.VincularTaloes.TLS" tabindex="0"
                            ng-focus="vm.VincularTaloes.onSelectLine(talao)"
                            ng-click="talao.CHECKED == 1 ?  vm.VincularTaloes.removeSelect(talao) : vm.VincularTaloes.onSelectLine(talao)"
                            ng-class="{ 'selected' : talao.CHECKED == 1 }">
                            <td><input type="checkbox" ng-checked="talao.CHECKED == 1"></td>
                            <td class="" style="text-align: start;">@{{ talao.REMESSA }}</td>
                            <td class="" style="text-align: start;">@{{ talao.CONTROLE }}</td>
                            <td class="" style="text-align: center;">@{{ talao.TALAO_ACUMULADO }}</td>
                            <td class="" style="text-align: start;">@{{ talao.MODELO_DESC }}</td>
                            <td class="" style="text-align: start;">@{{ talao.COR_DESC }}</td>
                            <td class="" style="text-align: start;">@{{ talao.COR_DESCRICAO }}</td>
                            <td class="" style="text-align: start;">@{{ talao.TAM_DESC }}</td>
                            <td class="" style="text-align: end;">@{{ talao.QUANTIDADE_PRODUCAO | number: 0 }}</td>
                            <td class="" style="text-align: center;">
                                <span ng-show="talao.VINCULO_TALAO  > 0" class="glyphicon glyphicon-tags"   btitle="Agrupamento: <br>@{{talao.GET_TALOES_VINCULADOS}}"></span>
                                <span ng-show="!talao.VINCULO_TALAO > 0" class="glyphicon glyphicon-minus"  btitle="Talão não agrupado"></span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

        </div>
    </div>

@overwrite

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