<?php $__env->startSection('title'); ?>
Produtos
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content-header'); ?>
Produtos 
<small>
   <?php echo $action; ?>

</small>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('breadcrumb'); ?>
<li>
    <a href="<?php echo route('admin.products.index'); ?>">
        Produtos
    </a>
</li>
<li class="active">
    <?php echo $action; ?>

</li>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('styles'); ?>
    <?php echo HTML::style('assets/vendor/jquery.filer/css/jquery.filer.css'); ?>

    <?php echo HTML::style('assets/vendor/magicsuggest/magicsuggest-min.css'); ?>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('plugins'); ?>
    <?php echo HTML::script('assets/vendor/jquery.filer/js/jquery.filer.min.js'); ?>

    <?php echo HTML::script('assets/vendor/jquery.inputmask/dist/min/jquery.inputmask.bundle.min.js'); ?>

    <?php echo HTML::script('assets/vendor/magicsuggest/magicsuggest-min.js'); ?>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
<div class="row">
    <div class="col-xs-12">
        <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
                
                <li class="active" role="navigation">
                    <a href="#tab-info" data-toggle="tab">Detalhes</a>
                </li>
                
                <?php /* TABS */ ?>
                <?php if($product->exists): ?>
                <li role="navigation">
                    <a href="#tab-tables" data-toggle="tab">Tabelas de Características</a>
                </li>
                <?php endif; ?>
                
            </ul>

            <div class="tab-content">
                <?php /* PRODUCT DETAILS */ ?>
                <div class="tab-pane active" id="tab-info">
                    <?php echo $__env->make('admin.products.partials.info', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
                </div>

                <?php if($product->exists): ?>
                <?php /* TABLES */ ?>
                <div class="tab-pane" id="tab-tables">
                    <?php echo $__env->make('admin.products.partials.tables', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
                </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
<script type="text/javascript">

$(document).ready(function() {

    $('.file_input').filer({
            showThumbs: true,
            limit: 3,
            name: 'images',
            maxSize: 5,
            extensions: ['jpg', 'png', 'jpeg'],
            templates: {
                box: '<ul class="jFiler-item-list"></ul>',
                item: '<?php echo $__env->make("admin.partials.filer-template", array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>',
                itemAppend: '<?php echo $__env->make("admin.partials.filer-template", array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>',
                progressBar: '<div class="bar"></div>',
                itemAppendToEnd: true,
                removeConfirmation: false,
                _selectors: {
                    list: '.jFiler-item-list',
                    item: '.jFiler-item',
                    progressBar: '.bar',
                    remove: '.jFiler-item-trash-action',
                }
            },
            addMore: true,
            files: <?php echo json_encode($files); ?>,
            onRemove: function(el, file){
                //put deleted images in a array of ids
            
               $input = $('input[name="deleted_images"]');

               var deleted = $.parseJSON($input.val());

               deleted.push(file.id);

               $input.val(JSON.stringify(deleted));
    

            },
            captions: {
                button: "Selecionar ficheiros",
                feedback: "Choose files To Upload",
                feedback2: "files were chosen",
                drop: "Drop file here to Upload",
                removeConfirmation: "Are you sure you want to remove this file?",
                errors: {
                    filesLimit: "Apenas são permitidas {{fi-limit}} imagens.",
                    filesType: "Apenas são permitidas imagens (jpg e png).",
                    filesSize: "A imagem {{fi-name}} é demasiado grande, max: {{fi-maxSize}} MB.",
                    filesSizeAll: "Files you've choosed are too large! Please upload files up to {{fi-maxSize}} MB."
                },
            }
        });
        
        $('input.mask-price').inputmask({
            alias: 'numeric',
            digits: 2,
            groupSeparator: '.',
            radixPoint: ',',
            allowPlus: false,
            allowMinus: false,
            autoGroup: true,
            digitsOptional: 1,
            clearMaskOnLostFocus: !1,
            rightAlign: false,
            autoUnmask: true,
            removeMaskOnSubmit: true
        });


    //Get subfamilies list
    $(document).on('change', 'select[name=family_id]', function(){

        $('#subfamily').find('.loading').html('<i class="fa fa-spin fa-circle-o-notch margin-top-30"></i> A carregar subfamílias...');
        $('#subfamily').find('.form-group').hide();
        $('select[name=subfamily_id]').val('').prop('required', false);
        
        $.post("<?php echo route('admin.products.subfamilies', ''); ?>/" + $(this).val(), function(data){
            if(data != null) {
                $('#subfamily').find('.form-group').show();
                $('select[name=subfamily_id]').replaceWith(data);
                $('select[name=subfamily_id]').prop('required', true);
            }
        }).fail(function(){
            $('#subfamily').find('.loading').html('<div class="text-red margin-top-30"><i class="fa fa-exclamation-circle"></i> Não foi possível obter lista de subfamílias.</div>');
        }).always(function(){
            $('#subfamily').find('.loading').html('');
        })
    })

    var $ms;
    //init magic suggest for create modals
    $ms = $('.magicsuggest').magicSuggest({
        maxSelection: 30,
        placeholder: "Escolha palavras-chave",
        name: "keywords",
        minChars: 3,
        data: "<?php echo route('admin.keywords.lists'); ?>"
    });


    $(document).on('change', 'input[name=name]', function () {
        var text = $(this).val();
        var words = text.split(' ');
        $ms.clear();
        $.each(words, function (key, value) {
            if (value != ' ') {
                $ms.setValue([value]);
            }
        })
    });

    <?php if($product->exists): ?>
    $ms.setValue(<?php echo json_encode($product->keywords->lists('keyword')); ?>);
    <?php endif; ?>
});

/**
 * Product Tables 
 */
$(document).on('click', '[data-action]',function(e){
    e.preventDefault();
    var $this = $(this);
    var $target = $($this.data('target'));
    var rowId, columnId, locale, index;
    
    if($this.data('action') == 'table-line-add') {
        addLine($target)
        $target.find('tr:last input[name*=th]').each(function(){
            $(this).val('0');
        });
    } else if($this.data('action') == 'table-line-add-title') {
        addLine($target);
        $trNew.find('td').css("background", "#ddd")
                         .css("font-weight", "bold");
        $target.find('tr:last input[name*=th]').each(function(){
            $(this).val('1');
        });
    } else if($this.data('action') == 'table-column-add') {
        
        $target.find('tr').each(function(){
            $tdLast = $(this).find("td:last-child");
            $tdNew = $tdLast.clone();
            $tdNew.find('input[name*=content]').val('');
            $(this).append($tdNew);
        });
        
    } else if($this.data('action') == 'table-line-remove') {
        $this.closest('tr').remove();
        if($target.find('tr').lenght == 2){
            $target.find('tr:last').addClass('hidden')
        }
        
    } else if($this.data('action') == 'table-column-remove') {
        index = $this.closest('td').index();
        $target.find('tr').each(function(){
            $(this).find('td:eq('+index+')').remove();
        });
    }
    
    $target.find('tr').each(function(){
        rowId = $(this).index();
        $(this).find('td').each(function(){
            columnId = $(this).index();
            $(this).find('input').each(function(){
                if($(this).attr('name').indexOf('content') > -1){
                    $(this).prop('name', 'content[' + rowId + '][' + columnId + ']');
                } else {
                    $(this).prop('name', 'th[' + rowId + '][' + columnId + ']');
                }
                
            });
        });
    });
})

function addLine($target){
    $trLast = $target.find("tr:last");
    $trNew = $trLast.clone();
    $trNew.find('input[name*=content]').val('');
    $trNew.find('td').prop('style', null)
    $trLast.after($trNew);
}
</script>

<?php $__env->stopSection(); ?>