<div class="row">
    <div class="col-md-10 col-lg-8 offset-md-1 offset-lg-2">
        <div class="row bg-secondary p-3">
            <div class="form-group col-12 col-sm-6 col-md-4">
                <div class="input-group">
                    <input
                        type="text"
                        class="form-control"
                        uib-datepicker-popup="dd/MM/yyyy"
                        ng-model="notaPedido.fechaCarga"
                        is-open="popup1.opened"
                        datepicker-options="dateOptions"
                        close-text="Cerrar"
                        current-text="Hoy"
                        clear-text="Borrar"
                        alt-input-formats="altInputFormats"
                    />
                    <span class="input-group-append">
                        <button type="button" class="btn btn-default" ng-click="popup1.opened = true">
                            <i class="fa fa-calendar"></i>
                        </button>
                    </span>
                </div>
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4">
                <div class="input-group">
                    <input
                        class="form-control"
                        type="text"
                        ng-model="notaPedido.vendedor.nombre"
                        placeholder="Seleccione Vendedor"
                        readonly="true"
                    >
                    <span class="input-group-append">
                        <button type="button" class="btn btn-default" ng-click="seleccionarVendedor()">
                            <i class="fa fa-search"></i>
                        </button>
                    </span>
                </div>
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4">
                <div class="input-group">
                    <input
                        class="form-control selectable"
                        type="text"
                        ng-model="notaPedido.cliente.nombre"
                        placeholder="Seleccione Cliente"
                        readonly="true"
                        ng-click="seleccionarCliente()"
                    >
                    <span class="input-group-append">
                        <button type="button" class="btn btn-default" ng-click="seleccionarCliente()">
                            <i class="fa fa-search"></i>
                        </button>
                    </span>
                </div>
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4">
                <input
                    class="form-control selectable"
                    type="text"
                    ng-model="domicilio.dom"
                    ng-click="abrirModalDomicilio()"
                    placeholder="Seleccione Domicilio"
                    uib-typeahead="
                                    domi.dom
                                    for domi
                                    in domiciliosCliente
                                "
                    typeahead-min-length="0"
                >
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4">
                <input
                    class="form-control selectable"
                    type="text"
                    readonly="true"
                    ng-model="notaPedido.precioCondicion"
                    ng-click="abrirModalListaPrecio()"
                    placeholder="Seleccione Lista de precio"
                >
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4">
                <label>Flete</label>
                <div class="form-check custom-radio custom-control-inline">
                    <input
                        ng-change="limpiarFlete()"
                        class="form-check-input"
                        type="radio"
                        name="radioFlete"
                        value="1"
                        ng-model="notaPedido.flete">
                    <label class="form-check-label">Si</label>
                </div>
                <div class="form-check custom-radio custom-control-inline">
                    <input                        
                        class="form-check-input"
                        type="radio"
                        name="radioFlete"
                        value="0"
                        ng-model="notaPedido.flete">
                    <label class="form-check-label">No</label>
                </div>
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4">
                <input 
                    class="form-control selectable"
                    type="text"
                    readonly="true"
                    ng-show="notaPedido.flete == 1"
                    ng-model="notaPedido.fleteNombre"
                    ng-click="abrirModalFlete()"
                    placeholder="Seleccione Flete"
                >
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4">
                <input
                    class="form-control selectable"
                    type="text"
                    ng-show="notaPedido.flete == 1"
                    ng-model="notaPedido.chofer"
                    placeholder="Seleccione Chofer"
                    uib-typeahead="chofer.nombre for chofer in choferes"
                    typeahead-min-length="0"
                >
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4">
                <input
                    class="form-control selectable"
                    type="text"
                    ng-show="notaPedido.flete == 1"
                    ng-model="notaPedido.vehiculo"
                    placeholder="Seleccione Vehículo"
                    uib-typeahead="vehiculo.tractor for vehiculo in vehiculos"
                    typeahead-min-length="0"
                >
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4">
                <input 
                    class="form-control selectable"
                    type="number"
                    step="0.01"
                    ng-show="notaPedido.flete == 1"
                    ng-model="notaPedido.costoUnitarioKmFlete"
                    placeholder="Costo por kilómetro"
                >
            </div>
            <div class="form-group col-12 col-sm-6 col-md-4">
                <input 
                    class="form-control selectable"
                    type="number"
                    step="0.1"
                    ng-show="notaPedido.flete == 1"
                    ng-model="notaPedido.kilometros"
                    placeholder="Kilómetros recorridos"
                >
            </div>
        </div>
    </div>
    <div class="col-auto my-2">
        <button ng-click="crearPedidoDemo()" type="button" title="Crear nota pedido" class="btn btn-primary float-right">Crear</button>
    </div>
</div>
<div class="row">
    <div class="col-md-10 col-lg-8 offset-md-1 offset-lg-2">
        <div class="row">
        </div>
        <div class="row">
            <table class="table table-striped table-sm">
                <thead>
                    <tr>
                        <th>Sector</th>
                        <th>Código</th>
                        <th>Descripción</th>                       
                        <th>Precio Unitario</th>
                        <th>Cantidad</th>
                        <th>SubTotal</th>
                        <th>
                            <button class="btn btn-outline-secondary selectable" style="float: right;" ng-click="show = !show; masMenos()" >
                                <i class="fa fa-chevron-down" ng-hide="show" aria-hidden="true"></i>
                                <i class="fa fa-chevron-up" ng-show="show" aria-hidden="true"></i>
                            </button>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-show="!articuloACargar">
                        <td colspan="2"><input placeholder="Seleccione Articulo" class="form-control" readonly ng-click="seleccionarArticulo()"></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr ng-show="articuloACargar">
                        <td><input
                                class="form-control"
                                ng-model="articuloACargar.sector"
                                readonly></td>
                        <td><input
                                class="form-control"
                                ng-model="articuloACargar.codigo"
                                readonly></td>
                        <td><input
                                class="form-control"
                                ng-model="articuloACargar.descripcion"
                                readonly></td>
                        <td><input
                                class="form-control"
                                ng-value="articuloACargar.precio | currency:'$'"
                                readonly></td>
                        <td><input
                                class="form-control"
                                type="number"
                                min="1"
                                value="1"
                                ng-model="articuloACargar.cantidad"
                                foca-focus="articuloACargar.cantidad == 1"
                                ng-keypress="agregarATabla($event.keyCode)"></td>
                        <td><input
                                class="form-control"                                
                                ng-value="getSubTotal() | currency:'$'"
                                readonly></td>
                        <td class="text-center"><button
                                class="btn btn-outline-secondary btn-sm"
                                ng-click="agregarATabla(13)">
                            <i class="fa fa-save"></i>
                        </button></td>
                    </tr>
                    <tr ng-repeat="(key, articulo) in articulosTabla" ng-show="show || key == 0">
                        <td ng-bind="articulo.sector"></td>
                        <td ng-bind="articulo.codigo"></td>
                        <td ng-bind="articulo.descripcion"></td>
                        <td ng-bind="articulo.precio | currency:'$'"></td>
                        <td><input 
                                ng-show="edit"
                                ng-model="articulo.cantidad"
                                class="form-control"
                                type="number"
                                min="1"
                                value="1"
                                foca-focus="edit"
                                ng-keypress="editarArticulo($event.keyCode)">
                            <i class="selectable" ng-click="cambioEdit()" ng-hide="edit" ng-bind="articulo.cantidad"></i>
                        </td>
                        <td ng-bind="(articulo.precio * articulo.cantidad) | currency: '$'"></td>
                        <td class="text-center">
                            <button class="btn btn-outline-secondary btn-sm" ng-click="quitarArticulo(key)">
                                <i class="fa fa-trash"></i>
                            </button>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr class="table-secondary">
                        <td colspan="5"><b>Cantidad Items:</b> <a ng-bind="articulosTabla.length"></a> </td>
                        <td colspan="3">{{getTotal() | currency:'$'}}</td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>

<!--
<form name="formCrearNota">
    <uib-tabset active="active">
        <uib-tab index="0" heading="General">
            <input type="hidden" name="id" ng-model="notaPedido.id" />
            <div>
                <div class="col-auto my-2">
                    <button type="submit" title="Siguiente" class="btn btn-primary float-right">Siguiente</button>
                </div>
            </div>
            <br>
            <br>
            <div class="row">
                <div class="col-md-2">
                    <div class="col-auto">
                        <label>Fecha de carga</label>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="col-auto">
                        <input type="date" class="form-control" ng-model="notaPedido.fechaCarga" ng-required="true">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="col-auto">
                        <label>Kilómetros</label>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="col-auto">
                        <input type="number" min="0" step="0.01" class="form-control" placeholder="Kilómetros recorridos para la entrega en el cliente"
                            ng-model="notaPedido.kilometros" ng-required="true">
                    </div>
                </div>
            </div>
            <div class="row my-3">
                <div class="col-md-2">
                    <div class="col-auto">
                        <label>Jurisdicción de IIBB</label>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="col-auto">
                        <input type="text" class="form-control" placeholder="Jurisdicción de IIBB donde se realiza la entrega"
                            ng-model="notaPedido.jurisdiccionIIBB" ng-required="true">
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="col-auto">
                        <label>Costo de financiación</label>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="col-auto">
                        <div class="input-group mb-2">
                            <div class="input-group-prepend">
                                <div class="input-group-text">$</div>
                            </div>
                            <input type="number" min="0" step="0.01" class="form-control" placeholder="Costo de financiación"
                                ng-model="notaPedido.costoFinanciacion">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2">
                    <div class="col-auto">
                        <label>Bomba</label>
                    </div>
                </div>
                <div class="col-md-1">
                    <div class="col-auto">
                        <div class="form-check custom-radio custom-control-inline">
                            <input class="form-check-input" type="radio" name="radioBomba" value="1" ng-model="notaPedido.bomba">
                            <label class="form-check-label">
                                Si
                            </label>
                        </div>
                        <div class="form-check custom-radio custom-control-inline">
                            <input class="form-check-input" type="radio" name="radioBomba" value="0" ng-model="notaPedido.bomba">
                            <label class="form-check-label">
                                No
                            </label>
                        </div>
                    </div>
                </div>
                <div class="col-md-1">
                    <div class="col-auto">
                        <label>Flete</label>
                    </div>
                </div>
                <div class="col-md-1">
                    <div class="col-auto">
                        <div class="form-check custom-radio custom-control-inline">
                            <input class="form-check-input" type="radio" name="radioFlete" value="1" ng-model="notaPedido.flete">
                            <label class="form-check-label">
                                Si
                            </label>
                        </div>
                        <div class="form-check custom-radio custom-control-inline">
                            <input class="form-check-input" type="radio" name="radioFlete" value="0" ng-model="notaPedido.flete">
                            <label class="form-check-label">
                                FOB
                            </label>
                        </div>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="col-auto">
                        <label>Costo unitario kilometro flete</label>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="col-auto">
                        <div class="input-group mb-2">
                            <div class="input-group-prepend">
                                <div class="input-group-text">$</div>
                            </div>
                            <input type="number" min="0" step="0.01" class="form-control" placeholder="Costo unitario del kilometro del flete"
                                ng-model="notaPedido.costoUnitarioKmFlete" ng-required="true">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row my-3">
                <div class="col-md-2">
                    <div class="col-auto">
                        <label>Vendedor</label>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="col-auto">
                        <input type="text" class="form-control" placeholder="Seleccione vendedor" ng-model="notaPedido.vendedor"
                            ng-click="seleccionarVendedor()" readonly>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="col-auto">
                        <label>Petrolera</label>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="col-auto">
                        <input type="text" class="form-control" placeholder="Seleccione petrolera" ng-model="notaPedido.petrolera"
                            ng-click="seleccionarPetrolera()" readonly>
                    </div>
                </div>
            </div>
            </div>
            <div class="row">
                <div class="col-md-2">
                    <div class="col-auto">
                        <label>Cliente</label>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="col-auto">
                        <input type="text" class="form-control" placeholder="Seleccione cliente" ng-model="notaPedido.cliente"
                            ng-click="seleccionarCliente()" ng-change="obtenerDomicilios()" readonly>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="col-auto">
                        <label>Domicilio</label>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="col-md-12 row" ng-repeat="domicilio in notaPedido.domicilio">
                        <div class="col-auto">
                            <input type="text" ng-model="domicilio.dom" placeholder="Domicilio" uib-typeahead="
                                    domi.dom
                                    for domi
                                    in domiciliosCliente
                                "
                                typeahead-no-results="sinResultados" typeahead-min-length="0" typeahead-on-select="seleccionar($item)"
                                class="form-control mb-2" ng-disabled="domicilio.id > 0" ng-required="true">
                            <i ng-show="cargandoClientes" class="fas fa-sync"></i>
                            <div ng-show="sinResultados">
                                No se encontraron resultados.
                            </div>
                        </div>
                        <a class="btn" ng-click="removeNewChoice(domicilio)" ng-if="domicilio.id==0">-</a>
                        <a class="btn" ng-click="addNewDom()">+</a>
                    </div>
                </div>
            </div>
        </uib-tab>
        <uib-tab index="1" heading="Producto" disable="formCrearNota.$invalid">
            <div>
                <div class="col-auto my-2">
                    <button ng-click="crearNotaPedido()" type="button" title="Crear nota pedido" class="btn btn-primary float-right">Crear</button>
                </div>
            </div>
            <br>
            <br>
            <div class="row">
                <div class="col-md-2">
                    <div class="col-auto">
                        <label>Precios y condiciones</label>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="col-auto">
                        <select class="form-control" ng-change="cargarArticulos()" ng-model="notaPedido.precioCondicion" ng-options="preCond.id as preCond.nombre for preCond in precioCondiciones">
                        </select>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="col-auto">
                        <label>Producto</label>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="col-auto">
                        <input type="text" class="form-control" placeholder="Seleccione producto" ng-model="notaPedido.producto"
                            ng-click="seleccionarArticulo()" readonly>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <table class="table my-3 table-hover table-nonfluid">
                    <thead>
                        <tr>
                            <th>Código</th>
                            <th>Nombre</th>
                            <th>Precio unitario</th>
                            <th>Costo unitario bruto</th>
                            <th>Cantidad</th>
                            <th>Subtotal</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="articulo in articulosTabla">
                            <td ng-bind="articulo.codigo"></td>
                            <td ng-bind="articulo.nombre"></td>
                            <td ng-bind="articulo.precio"></td>
                            <td ng-bind="articulo.costoUnitario"></td>
                            <td><input ng-model="articulo.cantidad" class="form-control" type="number" min="0" value="1"></td>
                            <td ng-bind="getSubTotal(articulo.item)"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </uib-tab>
    </uib-tabset>
</form>-->