@extends('layout')

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

<header class="content__title">
    <h1>Reporte de clientes</h1>
    <small>Registrados en tiendas</small>
    <div class="actions">
        <a href="/reporte-clientes" class="actions__item zmdi zmdi-refresh-alt"></a>
    </div>
</header>

<div class="card">
    <div class="card-body p-0">
        <div class="row no-gutters">
            <div class="col-sm-4">
                <div class="form-group m-3 mb-0">
                    <label>Grupo</label>
                    <div class="select">
                        <select id="grupo" class="form-control select2">
                            <option value="">Todos</option>
                            @foreach($grupos as $g)
                            <option value="{{ $g->id }}">{{ $g->nombre }}</option>
                            @endforeach
                        </select>
                        <i class="form-group__bar"></i>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group m-3 mb-0">
                    <label>Tienda</label>
                    <div class="select">
                        <select id="tienda" class="form-control select2">
                            <option value="">Todas</option>
                            @foreach($tiendas as $t)
                            <option value="{{ $t->id }}">{{ $t->nombre }}</option>
                            @endforeach
                        </select>
                        <i class="form-group__bar"></i>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="invoice__attrs__item bg-blue mb-0">
                    <small class="text-white">N° Clientes</small>
                    <h3 class="text-white">{{ number_format($total_clientes,0,'.','.') }}</h3>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-body p-0 pb-5">
        <div class="table-responsive">
            <table class="table table-hover mt-0" id="datatable_ajax">
                <thead>
                    <tr>
                        <th width="80">RUT</th>
                        <th>NOMBRE O RAZON SOCIAL</th>
                        <th>TELEFONO</th>
                        <th>EMAIL</th>
                        <th>COMUNA</th>
                        <th>TIENDA</th>
                    </tr>
                    <tr class="filter">
                        <td>
                            <div class="form-group mb-0">
                                <input type="text" class="form-control form-filter" placeholder="" data-column="0" autocomplete="off">
                                <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" autocomplete="off">
                                <i class="form-group__bar"></i>
                            </div>
                        </td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection


@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">
$(function() {
    var parametros_url = "grupo={{$grupo}}&tienda={{$tienda}}";
    $.extend( true, $.fn.dataTable.defaults, datatables_options);
    $.fn.dataTable.ext.errMode = function ( settings, helpPage, message ) { 
        mensaje('error','ERROR',message);
    };
    var table = $('#datatable_ajax').DataTable({
        ajax: '/clientes/reporte-datatables?' + parametros_url,
        columns: [
            { data: 'rut', name: 'rut' },
            { 
                data: 'nombre', 
                name: 'nombre',
                render: function(data,type,row){
                    return (row.tipo == 'p' ? '<mark>Particular</mark>' : '<mark>Empresa</mark>') + '<br><a href="{{ url('clientes/detalle') }}/'+ row.id +'">'+ (row.nombre ? row.nombre + (row.apellidos ? ' ' + row.apellidos : '') : row.razon_social) +'</a>'
                }
            },
            { data: 'telefono', name: 'telefono' },
            { data: 'email', name: 'email' },
            { 
                data: 'comuna', 
                name: 'comuna',
                render: function(data,type,row){
                    return data[0] +'<br><small>' + data[1] + '</small>';
                }
            },
            { data: 'tienda.nombre', name: 'tienda.nombre' },
        ]
    });

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

    $('.filter select').on('select2:select', function(){
        table
            .column($(this).data('column'))
            .search($(this).val())
            .draw();
    });

    @if($tienda)
    if($('#tienda option[value="'+{{ $tienda }}+'"]')[0])
        $('#tienda').val({{ $tienda }}).trigger('change');
    @endif
    @if($grupo)
    if($('#grupo option[value="'+{{ $grupo }}+'"]')[0])
        $('#grupo').val({{ $grupo }}).trigger('change');
    @endif

    $('#grupo').on('select2:select', function(){
        parametros_url = "grupo="+$(this).val()+"&tienda=";
        window.location.href = '/reporte-clientes?' + parametros_url;
    });
    $('#tienda').on('select2:select', function(){
        parametros_url = "grupo={{$grupo}}&tienda="+$(this).val();
        window.location.href = '/reporte-clientes?' + parametros_url;
    });
});
</script>
@endpush