<link rel="stylesheet" href="<?= asset('assets/vue-select.css') ?>">
<script src="<?= ruta_base() ?>public/assets/v-money.js"></script>
<script src="<?= ruta_base() ?>public/assets/js/vue-treeselect.umd.min.js"></script>
<link rel="stylesheet" href="<?= ruta_base() ?>public/assets/css/vue-treeselect.min.css">
<div class="container" id="appProductos" v-cloak>
    <div class="page-inner">
        <div class="page-header">
            <h4 class="page-title">Productos</h4>
            <ul class="breadcrumbs">
                <li class="nav-home">
                    <a href="<?= ruta_base() ?>">
                        <i class="flaticon-home"></i>
                    </a>
                </li>
                <li class="separator">
                    <i class="flaticon-right-arrow"></i>
                </li>
                <li class="nav-item">
                    <a href="<?= url('productos') ?>">Productos</a>
                </li>
            </ul>
            <div class="ml-md-auto" style="display: flex;">
                <div class="dropdown d-inline mr-3 mr-md-2">
                    <button class="btn btn-info btn-sm btn-border btn-round dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Acciones
                    </button>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" x-placement="top-start" style="position: absolute; transform: translate3d(0px, -7px, 0px); top: 0px; left: 0px; will-change: transform;">
                        <a class="dropdown-item" href="<?= url('fabricantes') ?>">Fabricantes</a>
                        <a class="dropdown-item" href="<?= url('proveedores') ?>">Proveedores</a>
                        <a class="dropdown-item" href="<?= url('categorias') ?>">Categorias</a>
                        <a class="dropdown-item" href="<?= url('tarifas') ?>">Tarifas</a>
                        <a class="dropdown-item" href="<?= url('almacenes') ?>">Almacenes</a>
                    </div>
                </div>
                <a href="<?php url('productos/crear'); ?>" class="btn btn-sm btn-info btn-border btn-round mr-2"><span class="fa fa-plus"></span> Nuevo producto</a>
                <button id="btn_wc" class="btn btn-sm btn-secondary btn-round" @click="woocommerce()">
                    <span class="wcicon-woo"></span> Woocommerce
                </button>
            </div>
        </div>
        <div class="row row-card-no-pd">
            <div class="col-sm-6 col-md-3">
                <div class="card card-stats card-round">
                    <div class="card-body ">
                        <div class="row">
                            <div class="col-4">
                                <div class="icon-big text-center">
                                    <i class="flaticon-box-3 text-success"></i>
                                </div>
                            </div>
                            <div class="col-8 col-stats">
                                <div class="numbers">
                                    <p class="card-category">Productos</p>
                                    <h4 class="card-title" id="count_productos">
                                        {{productos}}
                                    </h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="card card-stats card-round">
                    <div class="card-body ">
                        <div class="row">
                            <div class="col-4">
                                <div class="icon-big text-center">
                                    <i class="flaticon-price-tag text-success"></i>
                                </div>
                            </div>
                            <div class="col-8 col-stats">
                                <div class="numbers">
                                    <p class="card-category">Servicios</p>
                                    <h4 class="card-title">
                                        {{productos_servicios}}
                                    </h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="card card-stats card-round">
                    <div class="card-body ">
                        <div class="row">
                            <div class="col-4">
                                <div class="icon-big text-center">
                                    <i class="flaticon-hands-1 text-success"></i>
                                </div>
                            </div>
                            <div class="col-8 col-stats">
                                <div class="numbers">
                                    <p class="card-category">Sin stock</p>
                                    <h4 class="card-title">
                                        <?= count($productos_sin_stock) ?>
                                    </h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3">
                <div class="card card-stats card-round">
                    <div class="card-body ">
                        <div class="row">
                            <div class="col-4">
                                <div class="icon-big text-center">
                                    <i class="flaticon-success text-success"></i>
                                </div>
                            </div>
                            <div class="col-8 col-stats">
                                <div class="numbers">
                                    <p class="card-category">Publicos</p>
                                    <h4 class="card-title">
                                        <?= count($productos_publicos) ?>
                                    </h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <ul class="nav nav-tabs mb-3 d-print-none" id="mainTabs" role="tablist">
                    <li class="nav-item">
                        <a href="#ListProducto" class="nav-link active" data-toggle="tab" role="tab" aria-controls="ListProducto" @click="obtenerProductosSimples()">
                            <span class="d-none d-sm-inline-block" id="tab_count_productos">Productos ({{productos}})</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#ListStock" class="nav-link" data-toggle="tab" role="tab" aria-controls="ListStock">
                            <span class="d-none d-sm-inline-block">Stock ({{stockDispo}})</span>
                        </a>
                    </li>
                    <?php if ($stock_bajo) : ?>
                        <li class="nav-item">
                            <a href="#ListStockBajo" class="nav-link" data-toggle="tab" role="tab" aria-controls="ListStockBajo">
                                <span class="d-none d-sm-inline-block">Stock Bajo ({{stockbajo}})</span>
                            </a>
                        </li>
                    <?php endif; ?>
                    <?php if ($tarifas_productos) : ?>
                        <li class="nav-item">
                            <a href="#ListProductosTarifas" class="nav-link" data-toggle="tab" role="tab" aria-controls="ListProductosTarifas">
                                <span class="d-none d-sm-inline-block">Productos Tarifas</span>
                            </a>
                        </li>
                    <?php endif; ?>
                    <?php if ($stock_almacen) : ?>
                        <li class="nav-item">
                            <a href="#stop_almacen" class="nav-link" data-toggle="tab" role="tab" aria-controls="stop_almacen">
                                <span class="d-none d-sm-inline-block">Stock almacen</span>
                            </a>
                        </li>
                    <?php endif; ?>
                    <?php if ($protransferencia) : ?>
                        <li class="nav-item">
                            <a href="#TransStock" class="nav-link" data-toggle="tab" role="tab" aria-controls="TransStock">
                                <span class="d-none d-sm-inline-block">Transferencia de stock</span>
                            </a>
                        </li>
                    <?php endif; ?>
                    <?php if ($productos_vencidos) : ?>
                        <li class="nav-item">
                            <a href="#proVenc" class="nav-link" data-toggle="tab" role="tab" aria-controls="proVenc">
                                <span class="d-none d-sm-inline-block">Productos vencidos ({{stockvencido}})</span>
                            </a>
                        </li>
                    <?php endif; ?>
                    <?php if ($precio_lote) : ?>
                        <li class="nav-item">
                            <a href="#precLote" class="nav-link" data-toggle="tab" role="tab" aria-controls="precLote">
                                <span class="d-none d-sm-inline-block">Actualizar precio por lote</span>
                            </a>
                        </li>
                    <?php endif; ?>
                    <?php if ($lista_precios) : ?>
                        <li class="nav-item">
                            <a href="#precs" class="nav-link" data-toggle="tab" role="tab" aria-controls="precs">
                                <span class="d-none d-sm-inline-block">Lista de precios $, Bs.S, Bs.D</span>
                            </a>
                        </li>
                    <?php endif; ?>
                    <li class="nav-item">
                        <a href="#ListServicios" class="nav-link" data-toggle="tab" role="tab" aria-controls="ListServicios">
                            <span class="d-none d-sm-inline-block">Servicios {{productos_servicios.length}} </span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#ListProductosTarifas" class="nav-link" data-toggle="tab" role="tab" aria-controls="ListProductosTarifas">
                            <span class="d-none d-sm-inline-block">Lista productos Tarifas </span>
                        </a>
                    </li>
                      <li class="nav-item">
                        <a href="#ListProductosEtiqueta" class="nav-link" data-toggle="tab" role="tab" aria-controls="ListProductosEtiqueta">
                            <span class="d-none d-sm-inline-block">Lista productos (Etiqueta REF.) </span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="tab-content" id="mainTabsContent">
            <div class="tab-pane fade show active" id="ListProducto" role="tabpanel">
                <?php include 'tab_productos.php' ?>
            </div>
            <div class="tab-pane fade" id="stop_almacen" role="tabpanel">
                <?php include 'stop_almacenes.php' ?>
            </div>
            <div class="tab-pane fade" id="ListStock" role="tabpanel">
                <?php include 'tab_productos_stock.php'; ?>
            </div>
            <div class="tab-pane fade" id="ListStockBajo" role="tabpanel">
                <?php include 'tab_productos_stock_bajo.php'; ?>
            </div>
            <div class="tab-pane fade" id="ListProductosTarifas" role="tabpanel">
                <?php include 'tab_productos_tarifas.php';  ?>
            </div>
            <div class="tab-pane fade" id="TransStock" role="tabpanel">
                <?php include 'tab_productos_transferencia.php'; ?>
            </div>
            <div class="tab-pane fade" id="proVenc" role="tabpanel">
                <?php include 'tab_productos_vencidos.php'; ?>
            </div>
            <div class="tab-pane fade" id="ListServicios" role="tabpanel">
                <?php include 'tab_servicios.php'; ?>
            </div>
            <div class="tab-pane fade" id="precLote" role="tabpanel">
                <?php include 'tab_precLote.php' ?>
            </div>
            <div class="tab-pane fade" id="precs" role="tabpanel">
                <?php include 'tab_precs.php' ?>
            </div>
             <div class="tab-pane fade" id="ListProductosEtiqueta" role="tabpanel">
                <?php include 'tab_ListProductosEtiqueta.php' ?>
            </div>
        </div>
    </div>
    <?php include 'modallineas.php'; ?>
    <?php include 'modal_sticket.php'; ?>
    <?php include 'modal_actualizarprecio.php'; ?>
    <?php include 'modal_categorias_tarifa.php'; ?>
     <?php include 'modal_categoriaTarifaCuadricula.php'; ?>
</div>
<link rel="stylesheet" href="<?= asset('assets/woocommerce-icons-master/style.css') ?>">

<script src="<?= asset('assets/vue-select.js') ?>"></script> 
<script src="<?= asset('assets/vue-the-mask.js') ?>"></script>
<script src="<?= asset('assets/moment.min.js') ?>"></script>
<script src="<?= asset('assets/underscore-min.js') ?>"></script>
<script async src="<?= asset('assetsvuejs/productos/productos.js') ?>"></script>