@extends('layout')

@section('content')
<nav class="breadcrumb">
    <a class="breadcrumb-item" href="/">Home</a>
    <a class="breadcrumb-item" href="{{ url('reporte-clientes') }}">Reporte de clientes</a>
    <span class="breadcrumb-item active">{{ $datos->nombre() }}</span>
</nav>

<header class="content__title">
    <h1><strong>{{ $datos->rut }}</strong> - {{ $datos->nombre() }}</h1>
    <small>Registrado el {{ $datos->fecha_formato() }}</small>
    @if($datos->tipo == 'p')
    <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>
    @endif
</header>

<div class="card">
    <div class="card-body">
        <ul>
        @if($datos->tipo == 'p')
            <li><strong>TIPO:</strong> PARTICULAR</li>
            <li><strong>NOMBRE:</strong> {{ $datos->nombre.' '.$datos->apellidos }}</li>
            @if($datos->telefono) <li><strong>TELEFONO:</strong> {{ $datos->telefono }}</li> @endif
            @if($datos->email) <li><strong>EMAIL:</strong> {{ $datos->email }}</li> @endif
            @if($datos->direccion) <li><strong>DIRECCIÓN:</strong> {{ $datos->direccion }}</li> @endif 
            @if($datos->comunas)<li><strong>COMUNA:</strong> {{ $datos->comunas->nombre.' - '.$datos->comunas->region->nombre }} @endif
        @else
            <li><strong>TIPO:</strong> EMPRESA</li>
            <li><strong>RAZÓN SOCIAL:</strong> {{ $datos->razon_social }}</li>
            <li><strong>GIRO:</strong> {{ $datos->giro }}</li>
            <li><strong>DIRECCIÓN:</strong> {{ $datos->direccion }}</li>
            <li><strong>COMUNA:</strong> {{ $datos->comuna }}</li>
            @if($datos->telefono) <li><strong>TELEFONO:</strong> {{ $datos->telefono }}</li> @endif
            @if($datos->email) <li><strong>EMAIL:</strong> {{ $datos->email }}</li> @endif
        @endif
        </ul>

        <br>

        <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: 'id',
                name: 'id',
                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