@extends('layout')

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

<div class="card">
    <div class="card-body">
        @if(Auth::user()->tienda)
        <a href="#" class="badge badge-primary float-right mostrar-modal" data-toggle="modal" data-url="{{ url('clientes/m-agregar') }}"><i class="zmdi zmdi-plus-circle"></i>&nbsp; AGREGAR</a>
        @endif
        <h4 class="card-title">Clientes</h4>
        <h6 class="card-subtitle">Listado de todos los clientes registrados.</h6>

        <table class="table table-hover" id="datatable_clientes">
            <thead class="thead-default">
                <tr>
                    <th>RUT</th>
                    <th>TIPO</th>
                    <th>NOMBRE O RAZON SOCIAL</th>
                    <th>EMAIL</th>
                    <th>TELEFONO</th>
                </tr>
                <tr class="filter">
                    <td>
                        <div class="form-group mb-1">
                            <input type="text" class="form-control form-filter" placeholder="" data-column="0">
                            <i class="form-group__bar"></i>
                        </div>
                    </td>
                    <td class="filter-0">
                        <div class="select">
                            <select class="form-control select2">
                                <option value="">Todas</option>
                                <option value="e">Empresa</option>
                                <option value="p">Persona</option>
                            </select>
                            <i class="form-group__bar"></i>
                        </div>
                    </td>
                    <td>
                        <div class="form-group mb-1">
                            <input type="text" class="form-control form-filter" placeholder="" data-column="2">
                            <i class="form-group__bar"></i>
                        </div>
                    </td>
                    <td>
                        <div class="form-group mb-1">
                            <input type="text" class="form-control form-filter" placeholder="" data-column="3">
                            <i class="form-group__bar"></i>
                        </div>
                    </td>
                    <td>
                        <div class="form-group mb-1">
                            <input type="text" class="form-control form-filter" placeholder="" data-column="4">
                            <i class="form-group__bar"></i>
                        </div>
                    </td>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </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() {
    $.extend( true, $.fn.dataTable.defaults, datatables_options);
    $.fn.dataTable.ext.errMode = function ( settings, helpPage, message ) { 
        mensaje('error','ERROR',message);
    };
    var table = $('#datatable_clientes').DataTable({
        ajax: '{{ url('clientes/datatables') }}',
        columns: [
            { data: 'rut', name: 'rut' },
            { data: 'tipo', name: 'tipo' },
            { 
                data: 'nombre', 
                name: 'nombre',
                render: function(data,type,row){
                    return '<a href="{{ url('clientes/detalle') }}/'+ row.id +'">'+ (row.tipo == 'Persona' ? row.nombre + (row.apellidos ? ' ' + row.apellidos : '') : row.razon_social) +'</a>'
                }
            },
            { data: 'email', name: 'email' },
            { data: 'telefono', name: 'telefono' },
        ]
    });

    $('.form-filter').keyup(function(){
        var $this = $(this);
        delay(function(){
            table.columns($this.data('column'))
                .search($this.val())
                .draw();
        },600);
    });
    $('#datatable_clientes select').on('select2:select', function(e){
        table
            .column($(this).closest('td').index())
            .search($(this).val())
            .draw();
    });
});
</script>
@endpush