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

<?php $__env->startSection('content-header'); ?>
Subfamilias de Produtos
<?php $__env->stopSection(); ?>

<?php $__env->startSection('breadcrumb'); ?>
<li class="active">
    Subfamilias de Produtos
</li>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
<div class="row">
    <div class="col-xs-12">
        <div class="box no-border">
            <div class="box-header">
                <h3 class="box-title">Lista de Subfamilias de Produtos</h3>
                <div class="box-tools pull-right">
                    <a href="<?php echo route('admin.subfamilies.create'); ?>" class="btn btn-success btn-sm"><i class="fa fa-plus"></i> Nova Subfamília</a>
                </div>
            </div>
            <div class="box-body">
                <label id="filters" class="padding-left-10 hide">
                    |&nbsp;&nbsp;Grupo: <?php echo Form::select('group_id', $groups , null, array('class' => 'form-control input-sm filter-column')); ?>

                    &nbsp;
                    <span id="subfamily-filter" style="display: none">
                        <span class="loading"><i class="fa fa-spin fa-circle-o-notch"></i> Aguarde...</span>
                        <span class="select">
                            Família: 
                            <?php echo Form::select('family_id', $families , null, array('class' => 'form-control input-sm filter-column')); ?>

                        </span>
                    </span>       
                </label>  
                <table id="datatable" class="table table-bordered table-striped dataTable">
                    <thead>
                        <tr>
                            <th class="width-1">ID</th>
                            <th>Nome</th>
                            <th>Grupo e Família</th>
                            <th>Produtos</th>
                            <th class="width-120px">Data Criação</th>
                            <th class="width-40px"></th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
<script type="text/javascript">
    
    $(document).ready(function () {
       var oTable = $('#datatable').DataTable({
            dom: "<'row'<'col-md-8'l><'col-md-4'f>><'row'<'col-sm-12'tr>><'row'<'col-sm-5'i><'col-sm-7'p>>",
            processing: true,
            serverSide: true,
            "ajax": {
                url: "<?php echo route('admin.subfamilies.datatables'); ?>",
                type: "POST",
                data: function (d) {
                    d.group_id = $('select[name=group_id]').val();
                    d.family_id = $('select[name=family_id]').val();
                }
            },    
            "autoWidth": false,
            "order": [[0, "desc"]],
            columns: [
                 {data: 'id', name: 'id'},
                 {data: 'name', name: 'name'},
                 {data: 'family_id', name: 'family_id', orderable: false, searchable: false},
                 {data: 'count_products', name: 'count_products', searchable: false},
                 {data: 'created_at', name: 'created_at'},
                 {data: 'actions', name: 'actions', orderable: false, searchable: false},
             ],
            fnInitComplete: function () {
                $('#filters').appendTo('#datatable_length').removeClass('hide');
            },
        });

        $(document).on('change','.filter-column', function(e) {
            oTable.draw();
            e.preventDefault();
        });
    });
    
    $(document).on('change', 'select[name=group_id]', function(){
        var groupId = $(this).val();
        
        $('#subfamily-filter, #subfamily-filter .loading').show();
        $('#subfamily-filter .select').hide();
        
        $.post("<?php echo route('admin.subfamilies.families', ''); ?>/" + groupId, function(data){
            $('#subfamily-filter .loading').hide();
            $('#subfamily-filter .select').html('Familia: ' + data).show();
            $('select[name=family]').addClass('input-sm');
        }).fail(function(){
            $('#subfamily-filter, #subfamily-filter .loading').hide();
        })
    })
    
</script>
<?php $__env->stopSection(); ?>