@extends('layout')

@section('content')
<nav class="breadcrumb">
    <a class="breadcrumb-item" href="/">Home</a>
    <span class="breadcrumb-item active">Consulta Productos</span>
</nav>

<div class="card">
    <div class="card-body">
        <h4 class="card-title">Consulta de Productos &nbsp; <a href="#" class="btn-reiniciar" data-toggle="tooltip" data-original-title="Reset listado"><i class="zmdi zmdi-refresh"></i></a></h4>
        <h6 class="card-subtitle"></h6>

        <table class="table table-hover" id="datatable_productos">
            <thead class="thead-default">
                <tr>
                    <th width="100px">FOTO</th>
                    <th>SKU</th>
                    <th>NOMBRE</th>
                    <th>CATEGORIA</th>
                    <th width="100">ESTADO</th>
                    <th>PRECIO</th>
                </tr>
                <tr class="filter">
                    <td></td>
                    <td>
                        <div class="form-group mb-0">
                            <input type="text" class="form-control form-filter" placeholder="" data-column="1">
                            <i class="form-group__bar"></i>
                        </div>
                    </td>
                    <td>
                        <div class="form-group mb-0">
                            <input type="text" class="form-control form-filter" placeholder="" data-column="2">
                            <i class="form-group__bar"></i>
                        </div>
                    </td>
                    <td>
                        <div class="select">
                            <select class="form-control select2">
                                <option value="">Todas las categorías</option>
                                @foreach($categorias as $c)
                                <optgroup label="{{ $c->nombre }}">
                                    <option value="{{ $c->id }}">Todo {{ $c->nombre }}</option>
                                    @foreach($c->subcategoria($c->id) as $s)
                                    <option value="{{ $s->id }}">{{ $s->nombre }}</option>
                                    @endforeach
                                </optgroup>
                                @endforeach
                            </select>
                            <i class="form-group__bar"></i>
                        </div>
                    </td>
                    <td>
                        <div class="select">
                            <select class="form-control select2">
                                <option value="">Todas</option>
                                <option value="0">Activo</option>
                                <option value="1">Inactivo</option>
                            </select>
                            <i class="form-group__bar"></i>
                        </div>
                    </td>
                    <td></td>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>
@endsection

@push('styles')
<link rel="stylesheet" href="/vendors/fancybox-master/dist/jquery.fancybox.min.css">
<style type="text/css">
table tbody td:first-child{padding:5px!important}
</style>
@endpush

@push('scripts')
<script type="text/javascript" src="/vendors/datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/vendors/datatables/input.js"></script>
<script type="text/javascript" src="/vendors/fancybox-master/dist/jquery.fancybox.min.js"></script>
<script type="text/javascript">
$(function() {
    $.extend( true, $.fn.dataTable.defaults, datatables_options);
    $.fn.dataTable.ext.errMode = function ( settings, helpPage, message ) { 
        mensaje('error','ERROR',message);
    };
    var table = $('#datatable_productos').DataTable({
        ajax: '{{ url('productos/datatables-consulta') }}',
        order: [[1,'desc']],
        columns: [
            { 
                data: 'foto',
                name: 'foto',
                sortable: false,
                render: function(data,type,row){
                    if(row.foto){
                        var url = row.foto;
                        var url_chica = url.replace('.jpg','-150.jpg');
                        var url_grande = url.replace('.jpg','-1024.jpg');
                        return  '<a href="https://static.sammit.cl/'+row.id+'/'+url_grande+'" data-fancybox data-caption="'+row.codigo+' - '+row.nombre+'"><img src="https://static.sammit.cl/'+row.id+'/'+url_chica+'" alt="'+row.codigo+'" width="100%"></a>'
                    }else{
                        return '<img src="/img/default.jpg" alt="'+row.nombre+'" width="100%">';
                    }
                }
            },
            { data: 'codigo', name: 'codigo' },
            { data: 'nombre', name: 'nombre' },
            { data: 'categoria', name: 'categoria' },
            { 
                data: 'estado',
                name: 'estado',
                sortable: false,
                render: function(data,type,row){
                    if(row.estado){
                        return '<span class="badge badge-danger">INACTIVO</span>';
                    }else{
                        return '<span class="badge badge-success">ACTIVO</span>';
                    }
                }
            },
            { 
                data: 'precio',
                name: 'precio',
                sortable: false,
                sClass: 'text-right',
                render: function(data,type,row){
                    var obj = row.precio;
                    obj = obj.replaceAll('&quot;','"');
                    obj = JSON.parse(obj);
                    if(obj[0]){
                        var precio = obj[0].precio;
                        var html = '<div class="row"><div class="col-6">Medida</div><div class="col-6">Precio</div>';
                        $.each(obj,function(i,e){
                            if(precio > e.precio && e.estado == null){
                                precio = e.precio;
                            }
                            if(e.estado == null)
                                html += '<div class="col-6">'+(e.medida == undefined ? 'Única' : e.medida)+'</div><div class="col-6">$'+number_format(e.precio,0,'.','.')+'</div>';
                            else
                                html += '<div class="col-6"><s>'+(e.medida == undefined ? 'Única' : e.medida)+'</s></div><div class="col-6"><s>$'+number_format(e.precio,0,'.','.')+'</s></div>';
                        });

                        html += '</div>';
                        
                        if(precio > 0)
                            return '<span data-toggle="popover" data-content=\''+html+'\' data-html="true" data-trigger="hover">$'+number_format(precio,0,'.','.')+'</span>';
                        else
                            return '--';
                    }else{
                        return '--';
                    }


                    // return  '<a href="https://static.sammit.cl/'+row.id+'/'+url_grande+'" class="fancybox"><img src="https://static.sammit.cl/'+row.id+'/'+url_chica+'" alt="'+row.codigo+'" width="100%"></a>'
                }
            },
        ],
        'stateLoaded': function(settings,data){
            $.each(data.columns,function(i,e){
                if(e.search.search != ''){
                    if($('.filter td:eq('+i+') input').length)
                        $('.filter td:eq('+i+') input').val(e.search.search)
                    else if($('.filter td:eq('+i+') select').length)
                        // $(".filter td:eq("+i+") select option[value='"+e.search.search+"']").prop('selected',true);
                        $(".filter td:eq("+i+") select").val(e.search.search).trigger('change');
                }
            });
        },
        'fnDrawCallback': function(settings) {
            $('[data-toggle="popover"]').popover()
        },
        'stateSave': true
    });


    $('.form-filter').keyup(function(){
        var $this = $(this);
        delay(function(){
            table.columns($this.data('column'))
                .search($this.val())
                .draw();
        },600);
    });

    $('#datatable_productos thead select').on('change',function(){
        $('#datatable_productos thead select').each(function(i,e){
            table
                .column($(this).closest('td').index())
                .search($(this).val());
        });
        table.draw();
    });

    $('.btn-reiniciar').click(function(e){
        e.preventDefault();
        table.state.clear();
        window.location.reload();
    });
});
</script>
@endpush