<div class="modal fade bs-example-modal-lg" id="nuevo_articulo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">NUEVO ARTICULO</h4>
            </div>
            <form  name="add_name" id="add_name" method="post"  action="" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="tabbable">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#NUEVO_ARTICULO" data-toggle="tab">DATOS</a> </li>
                            <li><a href="#AVANZADO" data-toggle="tab">AVANZADO</a></li>
                            <li><a href="#PRESENTACIONES" data-toggle="tab">UNIDAD DE MEDIDA</a></li>
                        </ul>
                        <div class="tab-content"> 
                            <div id="resultados_articulo"></div>
                            <div class="tab-pane active" id="NUEVO_ARTICULO">
                                <div class="col-md-6">
                                    <label>Codigo</label>
                                    <div class="input-group">
                                        <input type="text" name="art_referencia" id="art_referencia" class="form-control input-sm" autocomplete="off" value="" >
                                        <span class="input-group-addon">
                                            <div id="Info_referencia"></div>
                                        </span>
                                    </div>

                                    <label>Codigo de Barras (opcional)</label>
                                    <div class="input-group">

                                        <input type="text" name="art_barras" id="art_barras" class="form-control input-sm" autocomplete="off" value="" onkeydown="return event.key !== ' '">
                                        <span class="input-group-addon">
                                            <div id="Info_barras"></div>
                                        </span>
                                    </div>

                                    <label>Referencia (opcional)</label>
                                    <div class="input-group">
                                        <input type="text" name="art_referencia2" id="art_referencia2" class="form-control input-sm" autocomplete="off" value="" >
                                        <span class="input-group-addon">
                                            <div id="Info_referencia_adi"></div>
                                        </span>
                                    </div>
                                   
                                <?php if($tienda_online=='si'){?>
                                    <label>Nombre Online</label>
                                    <textarea  name="art_nombre_online" id="art_nombre_online" class="form-control input-sm" rows="2" required autocomplete="off"></textarea>
                                <?php } else { ?>
                                    <input type="hidden" name="art_nombre_online" id="art_nombre_online">
                                <?php } ?>
                                   
                                    <label>Descripción Corta</label>
                                    <textarea name="art_nombre" id="art_nombre" class="form-control input-sm" rows="2" required autocomplete="off"></textarea>

                                <?php if($tienda_online=='si'){?>
                                    <label>Nombre Online</label>
                                    <label>Descripcion Larga</label>
                                    <textarea name="art_nombre_largo" id="art_nombre_largo" class="form-control input-sm" rows="2" required autocomplete="off"></textarea>
                                <?php } else { ?>
                                    <input type="hidden" name="art_nombre_largo" id="art_nombre_largo">
                                <?php } ?>

                                    <label>Proveedor</label>
                                    <section id="intro">
                                        <select name="art_proveedor" id="art_proveedor" class="form-control input-sm" required>
                                        <?php
                                            $result_1 = mysqli_query($con,"SELECT * FROM proveedor WHERE empresa='$empresa'");  
                                            while ($row_1=mysqli_fetch_array($result_1)) 
                                            {   
                                                echo "<option value='".$row_1['pro_id']."'>".$row_1['pro_nombre']."</option>"; 
                                            }  
                                            ?>
                                        </select>
                                    </section>

                                    <label>Categorias</label>
                                    <section id="intro" >
                                        <select name="art_familia" id="art_familia" class="form-control input-sm" required>
                                        <?php
                                            $datos = mysqli_query($con,"SELECT * FROM familias  WHERE   empresa='$empresa'   ") ;
                                            while( $fila = mysqli_fetch_array( $datos ) )
                                            {
                                                echo' <option value="'.$fila['fam_id'].'">'.$fila['fam_nombre'].'</option>';
                                            }
                                            ?>
                                        </select>
                                    </section>
                                    <?php if($tienda_online=='si' && $negocio_neg_id<>'4'){?>
                                    <label>Marca</label>
                                    <section id="intro" >
                                        <select name="art_marca" id="art_marca" class="form-control input-sm" required>
                                        <?php
                                            $datos = mysqli_query($con,"SELECT * FROM marca  WHERE   empresa='$empresa'   ") ;
                                            while( $fila = mysqli_fetch_array( $datos ) )
                                            {
                                                echo' <option value="'.$fila['mar_id'].'">'.$fila['mar_nombre'].'</option>';
                                            }
                                            ?>
                                        </select>
                                    </section>
                                    <?php } else { ?>
                                    <input type="hidden" name="art_marca" id="art_marca" value="1">
                                    <?php }

                                    if ($negocio_neg_id==3 or $negocio_neg_id=='2'){?> 
                                    <label>Ubicación</label>
                                    <section id="intro">
                                        <select name="art_ubicacion" id="art_ubicacion" class="form-control input-sm" required>
                                        <?php
                                            $result_1 = mysqli_query($con,"SELECT * FROM ubicacion WHERE empresa='$empresa' and sucursal='$sucursal' order by ubi_nombre desc");  
                                            while ($row_1=mysqli_fetch_array($result_1)) 
                                            {   
                                              echo "<option value='".$row_1['ubi_id']."' >".$row_1['ubi_nombre']."</option>"; 
                                            }  
                                            ?>
                                        </select>
                                    </section>
                                    <?php } else { ?>
                                    <input type="hidden" name="art_ubicacion" id="art_ubicacion" class="form-control input-sm" value="1">
                                    <?php } ?>

                                    <label>Garantia Meses</label>
                                    <input type="number" name="art_garantia" id="art_garantia" class="form-control input-sm" autocomplete="off" value="0" >
                                </div>
                                <!-- /span6 -->  
                                <div class="col-md-6" >
                                    <label>Precio de Costo</label>
                                    <input type="text" name="art_costo" id="art_costo" class="form-control input-sm" required autocomplete="off">
                                    <label>Impuesto</label>
                                    <select name="art_iva" id="art_iva" class="form-control input-sm" required>
                                    <?php
                                        $datos=mysqli_query($con,"SELECT * FROM iva where empresa='$empresa' ") ;
                                        while( $fila = mysqli_fetch_array( $datos ))
                                        {
                                            echo '<option value="'.$fila['iva_id'].'" select>'.$fila['iva_nombre'].'</option>';
                                        }
                                    ?>
                                    </select> 
                                    
                                    <!--<label>Utilidad (opcional)</label>-->
                                    <input type="hidden" name="art_utilidad" id="art_utilidad" class="form-control input-sm" value="" >

                                    <label>Precio General</label>
                                    <input type="text" name="art_pvp" id="art_pvp" class="form-control input-sm" autocomplete="off" required value="" onkeyup="pasar();">
                                    <?php
                                        $tar=mysqli_query($con,"SELECT count(tar_id) as tarifas FROM tarifas where empresa='$empresa'") ;
                                        $tar=mysqli_fetch_array($tar);
                                        $tarifas=$tar['tarifas'];
                                        if ($tarifas>1)
                                        {
                                            $datos=mysqli_query($con,"SELECT * FROM tarifas where tar_nombre<>'GENERAL' and empresa='$empresa' order by tar_orden asc ") ;
                                            while($fila = mysqli_fetch_array( $datos ) )
                                            {
                                        ?>
                                    <div class="" >
                                        <label>Precio <?php echo ucwords(strtolower($fila['tar_nombre'])); ?></label>
                                        <input type="hidden" name="nombre[]" id="nombre[]" class="form-control input-sm" value="<?php echo $fila['tar_id'];?>">
                                        <input type="number" name="precio[]" id="precio[]" class="form-control input-sm" autocomplete="off" required >
                                    </div>
                                    <?php } } ?>

                                    <?php if($tienda_online=='si') { ?>  
                                    </br>
                                    <div class="">
                                        <input name="art_online" id="art_online" type="checkbox" value="Activo" checked >
                                        <label class="lab" for="art_online" >Online </label>
                                    </div>
                                    <?php } ?>
                                </div> <!-- /span6 -->
                            </div>
                            <div class="tab-pane" id="AVANZADO">
                                <div class="col-md-6">
                                    <label>Venta Minima</label>
                                    <input type="number" name="art_venta_min" id="art_venta_min" class="form-control input-sm" value="1">
                                    <!--<label>Stock minimo</label>--> 
                                    <input type="hidden" name="art_minimo" id="art_minimo" class="form-control input-sm" required value="1" >

                                    <label>Cantidad de Alerta </label>
                                    <input type="number" name="art_escaso" id="art_escaso" class="form-control input-sm" value="1">

                                    <label>Comision de venta %</label>
                                    <input type="number" step="0.00001" name="art_comision" id="art_comision" class="form-control input-sm" value="0">

                                    <label>Lote </label>
                                    <select name="art_lote" id="art_lote" class="form-control input-sm" required >
                                        <option value="no">No Aplica</option>  
                                        <option value="si">Si Aplica</option>';
                                    </select>
                                </div>

                                <div class="col-md-6">
                                    <label>&nbsp</label>
                                    <ul class="gallery-container" >
                                        <li >
                                            <a href="img/articulos/sin_imagen.jpg" class="ui-lightbox">
                                                <img src="img/articulos/sin_imagen.jpg" alt=""  height="150px"/>
                                            </a> 
                                            <label for="imagen" style="width: 100%;">Subir Imagen </label>
                                             <input type="file"  name="imagen" id="imagen" >
                                        </li>
                                    </ul>
                                </div>

                                <div class="col-md-11">
                                    <label>Atributos </label><p>Indica si este producto tiene atributos como color, talla ... </p></div>
                                    <select name="art_atributo_estado" id="art_atributo_estado" class="form-control input-sm" required  onChange="atributos(this)">
                                        <option value="no">No Aplica</option>  
                                        <option value="si">Si Aplica</option>';
                                    </select>
                                    <!-- /atributo1 -->
                                    <div id="con_atributos" style="display: none">
                                        <div  class="col-md-6">
                                            <label>Nombre Atributo 1</label> 
                                            <div class="input-group">
                                                <input type="text" name="art_atributo1" id="art_atributo1" class="form-control input-sm">
                                                <span class="input-group-addon">
                                                    <a href="#" type="button" id="add_field" ></i> Añadir Opción</a>
                                                </span> 
                                            </div> </br>
                                            <div id="listas"> </div>
                                        </div>
                                        <!-- /atributo2 -->
                                        <div class="col-md-6">
                                            <label>Nombre Atributo 2</label>
                                            <div class="input-group">
                                                <input type="text" name="art_atributo2" id="art_atributo2" class="form-control input-sm">
                                                <span class="input-group-addon">
                                                    <a  type="button" id="add_field2"></i> Añadir Opción</a>
                                                </span> 
                                            </div></br>
                                            <div id="listas2"> </div>
                                        </div>
                                    </div>
                                    <div id="sin_atributos" style="display:"></div>
                                </div>

                                <div class="tab-pane" id="PRESENTACIONES">
                                    <div class="col-md-5" >
                                        <label>Medida estandar</label>
                                        <input type="text" name="nombre_pre" class="form-control input-sm" autocomplete="off" value="UND" >
                                    </div>
                                    <div class="col-md-2" >
                                        <label>Cantidad</label>
                                        <input type="text" name="cantidad_pre" class="form-control input-sm" autocomplete="off" value="1" readonly>
                                    </div>
                                    <div class="col-md-5" >
                                        <label>Precio</label>
                                        <div class="input-group">
                                            <input type="text" name="precio_pre" id="precio_pre" class="form-control input-sm" value="" readonly>
                                            <span class="input-group-addon">
                                                <a type="button" id="add_presentacion1"><i class="btn-icon-only icon-plus"></i></a>
                                            </span>
                                        </div>
                                    </div>
                                    <div id="listas_pre1"> </div>
                                </div>

                            </div>
                        </div><!-- tab table-->


                        <table width="100%">
                            <tr>
                                <td>
                                    <div class="modal-footer">
                                        <a href="I_articulos.php" class="btn btn-default" data-dismiss="modal">Cancelar</a>
                                        <input type="submit" name="submit" id="submit" class="btn btn-success"  value="Registrar" /> 
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div><!-- /.modal-body -->       
            </form>
        </div>
    </div><!-- /.modal-dialog -->
</div>
<script>
var campos_presenta1= 1000;   
var xpre1 = 0;

$('#add_presentacion1').click (function(e) {
    e.preventDefault();    
    if (xpre1 < campos_presenta1)
    {
        $('#listas_pre1').append('<div >\
            <div class="col-md-5">\
                <label>Nombre</label>\
                <input type="text" name="nombre_prei[]" class="form-control input-sm" value="" required >\
            </div>\
            <div class="col-md-2">\
                <label>Cantidad</label>\
                <input type="number" step="0.00001" name="cantidad_prei[]" class="form-control input-sm" value="1" required>\
            </div>\
            <div class="col-md-4">\
                <label>Precio</label>\
                <input type="number" name="precio_prei[]" class="form-control input-sm" value="" required>\
            </div>\
                <label>&nbsp; </label>\
                <a href="#" class="remover_pre1 btn btn-xs btn-danger col-xs-1"> <i class="btn-icon-only icon-remove"></i></a>\
            </br></br></br></div>');
        xpre1++;
    }
});
// Remover o div anterior
$('#listas_pre1').on("click",".remover_pre1",function(e) {
      e.preventDefault();
      $(this).parent('div').remove();
      xpre1--;
});



//atributos1
var campos_max = 1000;   //max de 10 campos
var x = 0;
$('#add_field').click (function(e) {
    e.preventDefault();     //prevenir novos clicks
    if (x < campos_max)
    {
        $('#listas').append('<div>\
            <div class="col-xs-11">\
                <input class="form-control input-sm" type="text" name="opcion1[]">\
            </div>\
            <a href="#" class="remover_campo btn btn-xs btn-danger col-xs-1"> <i class="btn-icon-only icon-remove"></i></a>\
            </br></br></div>');
            x++;
    }
});
// Remover o div anterior
$('#listas').on("click",".remover_campo",function(e) {
      e.preventDefault();
      $(this).parent('div').remove();
      x--;
});


//atributos2
var campos_max2 = 1000;   //max de 10 campos
var x2 = 0;

$('#add_field2').click (function(e) {
e.preventDefault();     //prevenir novos clicks
if (x2 < campos_max2)
{
    $('#listas2').append('<div>\
        <div class="col-xs-11">\
            <input class="form-control input-sm" type="text" name="opcion2[]">\
        </div>\
        <a href="#" class="remover_campo2 btn btn-xs btn-danger col-xs-1"> <i class="btn-icon-only icon-remove"></i></a>\
        </br></br></div>');
        x2++;
}
});
// Remover o div anterior
$('#listas2').on("click",".remover_campo2",function(e) {
      e.preventDefault();
      $(this).parent('div').remove();
      x2--;
});
    

function pasar()
{
    document.getElementById('precio_pre').value = document.getElementById('art_pvp').value;
}

function atributos(sel) 
{
    if (sel.value=="si"){
       divC = document.getElementById("con_atributos");
       divC.style.display = "";
       divT = document.getElementById("sin_atributos");
       divT.style.display = "none";
    }else  {

       divC = document.getElementById("con_atributos");
       divC.style.display="none";

       divT = document.getElementById("sin_atributos");
       divT.style.display = "";
    }
}

$(document).ready(function() 
{  
  $('#art_referencia').blur(function(){
    $('#Info_referencia').html('<img src="img/ajax-loader.gif" alt="" height="16px"  />').fadeOut(1000);
    var art_referencia = $(this).val();    
    var dataString = 'art_referencia='+art_referencia;
    $.ajax({
            type: "POST",
            url: "php_articulo/verificar_articulo_referencia.php",
            data: dataString,
            success: function(data) {
        $('#Info_referencia').fadeIn(1000).html(data);
            }
        });
    });              
});   

$(document).ready(function() 
{  
  $('#art_barras').blur(function(){
    $('#Info_barras').html('<img src="img/ajax-loader.gif" alt="" height="16px"  />').fadeOut(1000);
    var art_barras = $(this).val();    
    var dataString = 'art_barras='+art_barras;
    $.ajax({
            type: "POST",
            url: "php_articulo/verificar_articulo_barras.php",
            data: dataString,
            success: function(data) {
        $('#Info_barras').fadeIn(1000).html(data);
            }
        });
    });              
});   

$(document).ready(function() 
{  
  $('#art_referencia2').blur(function(){
    $('#Info_referencia_adi').html('<img src="img/ajax-loader.gif" alt="" height="16px"  />').fadeOut(1000);
    var art_referencia2 = $(this).val();    
    var dataString = 'art_referencia2='+art_referencia2;
    $.ajax({
            type: "POST",
            url: "php_articulo/verificar_articulo_referencia_adicional.php",
            data: dataString,
            success: function(data) {
        $('#Info_referencia_adi').fadeIn(1000).html(data);
            }
        });
    });              
});   
</script>
<style type="text/css">
    font-family: 'Lato';
    font-size: 16px;
    background-color: rgb(245,250,250);
    color: #161616;
    }
    a {
    text-decoration: none;
    }
    /* Botoes */
    input[type=button] {
    width: 180px;
    height: 30px;
    background-color: rgb(109, 146, 155);
    color: white;
    font-family: Lato;
    padding-left: auto;
    padding-right: auto;
    text-align: center;
    font-size: 18px;
    border-style: solid;
    border-width: thin;
    border-color: rgb(193, 218, 214);
    border-radius: 3px;
    }
</style>
<style type="text/css">
    input[type="file"]#imagen {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
    }
    label[for="imagen"] {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background-color: #106BA0;
    display: inline-block;
    cursor: pointer;
    padding: 5px 40px ;
    width: fit-content;
    text-align: center;
    }
</style>