<ul class="list-group">

<?php
if(!empty($categoria_ps['productos'])) {
    $estados[0] = '<span class="badge badge-pill badge-danger">Inactivo</span>';
    $estados[1] = '<span class="badge badge-pill badge-success">Activo</span>';
    ?>
    <li class="list-group-item">
        <h5 class="char">Productos en categoría <strong><?php echo $categoria_ps['name'];?></strong>: <?php echo count($categoria_ps['productos']);?></h5>
        
        <div class="col-4 col-md-8 form-group producto-categoria">
            <img class="imagen-producto" title=""></img>
            <input type="hidden" name="id_category" class="input-id-category" value="<?php echo $categoria_ps['id_category']; ?>">
            <input type="hidden" name="id_producto" class="input-id-producto">
            <input type="hidden" name="ps_id_product" class="input-ps-id-product">
            <input type="text" name="producto" class="form-control input-producto new" placeholder="Producto" autocomplete="off">
            <button class="btn btn-success my-2 my-sm-0 btn-agregar" disabled="disabled">Agregar</button>
            <div class="product-warning hidden">Este producto ya se encuentra en la categoría</div>
        </div>

        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th class="text-center">Posición</th>
                        <th class="text-center">Prestashop</th>
                        <th>Producto</th>
                        <th class="text-center">Estado</th>
                        <th class="text-center">Stock PS</th>
                        <th class="text-center">Acciones</th>
                    </tr>
                </thead>
                <tbody class="lista-productos">
                    <?php
                    foreach($categoria_ps['productos'] as $p) {
                        ?>
                        <tr id="product-<?php echo $p['id_product']; ?>" class="producto-existente" data-ps-id="<?php echo $p['id_product']; ?>">
                            <td class="text-center"><?php echo $p['position']; ?></td>
                            <td class="text-center">
                                <?php 
                                    if ($p['id_product'] > 0) {
                                        ?>
                                        <span class="badge badge-pill badge-primary ps-id-product ver-ps" data-ps-id="<?php echo $p['id_product']; ?>">
                                            <?php echo $p['id_product']; ?>
                                        </span>
                                        <?php
                                    }
                                ?>
                            </td>
                            <td>
                                <?php
                                if (!empty($ps_imagenes[$p['id_product']])) {
                                    echo ps_image($ps_imagenes[$p['id_product']]);
                                } 
                                ?>
                                    <span class="nombre"><?php echo $p['name']; ?></span>
                                <?php /* <span class="badge badge-pill badge-primary"><?php echo $rankings[$p['id_ranking']]?></span>*/ ?>
                                
                            </td>
                            <td class="text-center"><?php echo $estados[$p['active']]; ?></td>
                            <td class="text-center"><?php echo danger_badge($p['quantity'], 'menor', 1); ?></td>
                            <td class="text-center">
                                <?php if ($categoria_ps['id_category'] != $p['id_category_default']) { ?>
                                <button type="button" class="btn btn-danger btn-xs d-lg-inline btn-remover"
                                data-id-category="<?php echo $categoria_ps['id_category']; ?>" data-id-product="<?php echo $p['id_product']; ?>">
                                    <i class="fa fa-times"></i>
                                </button>
                                <?php } ?>
                            </td>
                        </tr>
                    <?php
                    }
                    ?>
                </tbody>
            </table>
        </div>
    </li>
    <table class="d-none">
        <tbody class="copy">
            <tr id="" class="producto-existente" data-ps-id="">
                <td class="text-center position"></td>
                <td class="text-center">
                    <span class="badge badge-pill badge-primary ps-id-product ver-ps" data-ps-id=""></span>
                </td>
                <td>
                    <img class="imagen-producto-view">
                    <span class="nombre"></span>
                </td>
                <td class="text-center active"></td>
                <td class="text-center quantity"></td>
                <td class="text-center">
                    <button type="button" class="btn btn-danger btn-xs d-lg-inline btn-remover"
                    data-id-category="" data-id-product="">
                        <i class="fa fa-times"></i>
                    </button>
                </td>
            </tr>
        </tbody>
    </table>
    <?php
}
else {
    ?>
    <li><h4>No hay productos en esta categoría</h4></li>
    <?php
}
?>
</ul>

<script>
<?php
echo 'var ps_imagenes = ' . json_encode($ps_imagenes) . ';
';
?>
$(document).ready(function() {

    $(document).on('click', '.input-producto', function() {
        if($(this).hasClass('new')){
            autocompleteProducto($(this));
            $(this).removeClass('new');
        }
    });

    // Carga datos del producto
    $(document).on('change', '.input-producto', function() {
        $('.btn-agregar').attr('disabled', 'disabled');
        $('.product-warning').hide();
        let producto = $(this).closest('.producto-categoria');
        let ps_id = producto.find('.input-ps-id-product').val();
        let imagen = producto.find('.imagen-producto');
        if(ps_imagenes[ps_id] != undefined) {
            muestra_imagen(imagen, ps_imagenes[ps_id]);
        }

        // Busca si producto ya está en la categoría
        // En caso de no estar habilita el botón de agregar
        let existe = 0;
        $('.producto-existente').each(function() {
            if (ps_id == $(this).data('ps-id')) {
                existe++;
            }
        });

        if (existe <= 0) {
            console.log('no existe');
            // Habilita boton agregar
            $('.btn-agregar').removeAttr('disabled');
        }
        else {
            // console.log('existe');
            $('.product-warning').show();
        }
    });


    $(document).on('click', '.btn-agregar', function(){
        $(this).attr('disabled', 'disabled');
        $('.input-producto').val('');
        $('.imagen-producto').removeAttr('src').removeAttr('data-original-title').removeAttr('title');

        let producto = $(this).closest('.producto-categoria');
        let id_category = producto.find('.input-id-category').val();
        let id_product = producto.find('.input-ps-id-product').val();

        // Ajax a remover_categoria
        let parametros = {
            id_category: id_category,
            id_product: id_product
        }

        $.ajax({
            data: parametros,
            url:  '/productos/agregar_categoria',
            type: 'post',
            beforeSend: function () {
            },
            success:  function (response) {
                console.log(response);
                producto = response.producto;
                let html = $($.parseHTML($('.copy').html()));

                console.log(id_product);
                console.log(id_category);
                html.attr('id', id_product).attr('data-ps-id', id_product);
                html.find('.position').html(producto['position']);
                html.find('.ps-id-product').html(id_product).data('ps-id', id_product);
                html.find('.nombre').html(producto['name']);
                html.find('.quantity').html(producto['quantity']);
                html.find('.btn-remover').attr('data-id-category', id_category).attr('data-id-product', id_product);

                let imagen = html.find('.imagen-producto-view');
                if(ps_imagenes[id_product] != undefined) {
                    muestra_imagen(imagen, ps_imagenes[id_product]);
                }

                if (producto.active == 0) {
                    html.find('.active').html('<span class="badge badge-pill badge-danger">Inactivo</span>');
                }
                else {
                    html.find('.active').html('<span class="badge badge-pill badge-success">Activo</span>');
                }

                $('.lista-productos').append(html);
            }
        });


    });


    $(document).on('click', '.btn-remover', function(){
        let producto = $(this).closest('.producto-existente');
        let id_category = $(this).data('id-category');
        let id_product = $(this).data('id-product');

        producto.remove();

        // Ajax a remover_categoria
        let parametros = {
            id_category: id_category,
            id_product: id_product
        }

        $.ajax({
            data: parametros,
            url:  '/productos/remover_categoria',
            type: 'post',
            beforeSend: function () {
            },
            success:  function (response) {
            }
        });
    });
});
</script>
