@{
    ViewBag.Title = "Reexpediciones - Pendiente de Carga";
}
<style>
    thead, tbody { display: block; }
tbody {
    height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}
th,td { 
    width:300px;
    }
</style>
<div class="row" ng-controller="reexpedicionController as vm" ng-init="vm.InsertarFolioReexpedicion();vm.BuscarBultosPedientesCarga();">
    <div class="container">
        <div class="col-m-12">
            
                <h2>Pendientes de carga</h2>

            <script>
                idFolio = '@ViewBag.idFolio';
            </script>
            
            <div>
                <div class="col-md-5">
                    <div class="form-group col-md-12">
                        <h4><label>Folio de carga:</label><span>{{vm.FolioCarga}}</span></h4>
                    </div>
                    <div class="form-group col-md-12">
                        <input  type="number" class="form-control  registro" id="txtGatepass" ng-model="vm.BuscarGatePassPendienteCargaId"  ng-keyup="$event.keyCode == 13 ? vm.VerificarGatePassPendienteCarga(this) : null"  name="servicio" placeholder="Gatepass" autocomplete="off">
                    </div>
                    <div class="form-group col-md-12">
                        <input type="text" class="form-control  registro" id="txtServicio" ng-model="vm.pendienteCarga.Linea" disabled="disabled" name="servicio" placeholder="Línea transportista" autocomplete="off">
                    </div>
                    <div class="form-group col-md-12">
                        <input type="text" class="form-control  registro" id="txtServicio" ng-model="vm.pendienteCarga.NumVehiculo" disabled="disabled" name="servicio" placeholder="Núm. Vehículo" autocomplete="off">
                    </div>
                    <div class="form-group col-md-12">
                        <input type="text" class="form-control  registro" id="txtServicio" ng-model="vm.pendienteCarga.Chofer" disabled="disabled" name="servicio" placeholder="Chofer" autocomplete="off">
                    </div>
                    <div class="form-group col-md-12">
                        <div class="btn btn-primary btn-upload ng-isolate-scope" ng-click="vm.MostrarImagenes();">
                            <i class="glyphicon glyphicon-camera"></i>
                        </div>       
                    </div>

                </div>
                <div class="col-md-7">
                    <div class="col-md-6">
                        <h4>Buscar Folio</h4>                        
                    </div>
                    <div class="col-md-6">                        
                        <input type="text" class="form-control  autonumber" id="txtidFolio" ng-model="vm.pendienteCarga.IdFolio" ng-keyup="$event.keyCode == 13 ? vm.BuscarFolio(this) : null" name="idFolio" placeholder="Folio" autocomplete="off">
                    </div>
                    <div class="col-md-12">                        
                        <h4>Bultos pendientes de carga</h4>
                        <table class="table table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>ID Bulto</th>
                                    <th>NumBulto</th>
                                    <th>Guia</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="r in vm.PendientesCargaTodos" >
                                    <td>{{r.Id}}</td>
                                    <td>{{r.NumBulto}}</td>
                                    <td>{{r.GuiaOBL}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-md-12">
                        <input type="text" class="form-control  registro" id="txtIDBulto" ng-model="vm.pendienteCarga.IdBulto" ng-keyup="$event.keyCode == 13 ? vm.buscarIDBultoPendienteCargaTodos(this) : null" name="idbulto" placeholder="ID Bulto" autocomplete="off">                        
                    </div>
                    <div class="col-md-12 pull-right text-right">Bultos Pistoleados: {{vm.PendientesCargadosTodos.length}}</div>
                    <div class="col-md-12">
                        <h4>Asignados a Folio</h4>
                        <table class="table table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>.</th>
                                    <th>ID Bulto</th>
                                    <th>NumBulto</th>
                                    <th>Guia</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="r in vm.PendientesCargadosTodos">
                                    <td ng-if="r.Pendiente"><i class="glyphicon glyphicon-remove" ng-click="vm.removerPendienteCargaTodos($index);"></i></td>
                                    <td ng-if="!r.Pendiente"></td>
                                    @*<td><i class="glyphicon glyphicon-remove" ng-click="vm.removerPendienteCarga($index);"></i></td>*@
                                    <td>{{r.Id}}</td>
                                    <td>{{r.NumBulto}}</td>
                                    <td>{{r.GuiaOBL}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

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

        <div class="col-md-12">

            <div class="col-md-6 text-right pull-right ">
                @*<div class="btn btn-default">Re-abrir referencia</div>*@
                <div class="btn btn-default pull-right" ng-click="vm.guardarPendienteCargaTodos();">Guardar Carga</div>
            </div>
        </div>



        <div id="mdl-imagenes" modal="showModal" close="cancel()" class="modal fade modal-arriba" data-easein="expandIn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">

            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <div class="row">
                            <div class="col-xs-12 col-sm-12">
                                <h3 class="modal-title" id="modal-title">
                                    Galería
                                    <a href="" data-dismiss="modal" class="btn btn-danger pull-right" title="Cerrar">
                                        <i class="glyphicon glyphicon-remove"></i>
                                    </a>
                                </h3>

                            </div>
                    </div>
                    <div class="modal-body">
                        <ng-galleria source="vm.imagenes" ng-if="vm.imagenes.images.length > 0"></ng-galleria>
                        <div ng-if="vm.imagenes.images.length == 0" class="alert alert-info">
                            <i class="glyphicon glyphicon-info-sign"></i>
                            No se encontraron imágenes cargadas
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
</div>

    </div>
@section scripts{
    <script src="~/Scripts/app/controladores/ReexpedicionController.js"></script>
    <script src="~/Scripts/app/factory/ReexpedicionFactory.js"></script>

<script src="~/Scripts/app/controladores/modalGaleriaController.js"></script>
<script src="~/Scripts/app/factory/gatepassFactory.js"></script>
    <script src="~/Scripts/select2.full.min.js"></script>
    <script type="text/javascript">
        $(".select2").select2({});
    </script>
}