@extends('layout')

@section('content')
<nav class="breadcrumb">
    <a class="breadcrumb-item" href="/">Home</a>
    <a class="breadcrumb-item" href="{{ url('clientes') }}">Clientes</a>
    <span class="breadcrumb-item active">Nombre del cliente</span>
</nav>

<header class="content__title">
    <h1><strong>{{ $datos->rut }}</strong> - @if(!empty($datos->nombre)) {{ $datos->nombre.' '.$datos->apellidos }} @else {{ $datos->razon_social }} @endif</h1>
    <small>Registrado el {{ $datos->fecha_formato() }}</small>
    <div class="actions">
        <a href="#" class="actions__item zmdi zmdi-edit mostrar-modal" data-toggle="modal" data-url="{{ url("/clientes/m-editar/$datos->id") }}"></a>
    </div>
</header>

<div class="card">
    <div class="card-body">
        <ul class="icon-list">
            {{-- <li><i class="zmdi zmdi-store"></i> {{ $datos->tienda->nombre }}</li> --}}
            @if($datos->telefono)
            <li><i class="zmdi zmdi-phone"></i> {{ $datos->telefono }}</li>
            @endif
            @if($datos->email)
            <li><i class="zmdi zmdi-email"></i> {{ $datos->email }}</li>
            @endif
        </ul>

        <div class="table-responsive">
            <table class="table table-hover mt-0" id="datatable_ajax">
                <thead class="thead-default">
                    <tr>
                        <th>N°</th>
                        <th>MONTO</th>
                        <th>FECHA</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 text-right" placeholder="" data-column="1" 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 fecha-rango text-right" data-meses="2" placeholder="" data-column="2" autocomplete="off">
                                <i class="form-group__bar"></i>
                            </div>
                        </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() {
    $.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/ventas/'.$datos->id }}',
        columns: [
            { 
                data: 'folio',
                name: 'folio',
                render: function(data,type,row){
                    return  '<a href="'+(row.tipo == 'm' ? '{{ url('ventas/detalle-manual') }}' : '{{ url('ventas/detalle') }}') + '/' + row.id +'" data-nc="'+(row.nota_credito ? true : false)+'">' + (row.tipo == 'b' ? 'BOLETA' : (row.tipo == 'f' ? 'FACTURA' : 'MANUAL')) + ' N°'+ row.folio +'</a>'
                }
            },
            { data: 'monto', name: 'monto', sClass: 'text-right text-cyan' },
            { data: 'fecha', name: 'fecha', sClass: 'text-right' },
        ],
        order: [[0, 'desc']],
        createdRow: function(row,data,index){
            if($(row,'td:eq(0)').find('a[data-nc="true"]').length){
                $(row).addClass('table-danger');
            }
        }
    });

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

    $('.fecha-rango').change(function(){
        table.columns($(this).data('column'))
                .search($(this).val())
                .draw();
    });
});
</script>
@endpush