@extends('layout')

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

<div class="row quick-stats">
    <div class="col-sm-4">
        <div class="card card--inverse bg-green">
            <div class="card-body p-3">
                <h4 class="card-title m-0">${{ number_format($totales->ventas_dia ?? 0,0,'.','.') }}</h4>
                <h6 class="card-subtitle m-0">Ventas del día</h6>
            </div>
        </div>
    </div>

    <div class="col-sm-4">
        <div class="card card-warning card--inverse bg-orange">
            <div class="card-body p-3">
                <h4 class="card-title m-0">$<span id="gasto-dia">{{ number_format($gasto ?? 0,0,'.','.') }}</span></h4>
                <h6 class="card-subtitle m-0">Gastos del día</h6>
                <div class="actions actions--inverse">
                    <span data-toggle="tooltip" data-original-title="Agregar gasto">
                        <a href="#" class="mostrar-modal actions__item zmdi zmdi-plus-circle" data-toggle="modal" data-url="{{ url('ventas/m-gasto') }}"></a>
                    </span>
                </div>
            </div>
        </div>
    </div>

    <div class="col-sm-4">
        <div class="card card-warning card--inverse bg-teal">
            <div class="card-body p-3">
                <h4 class="card-title m-0">${{ number_format($totales->ventas_mes ?? 0,0,'.','.') }}</h4>
                <h6 class="card-subtitle m-0">Ventas del mes</h6>
            </div>
        </div>
    </div>
</div>

<header class="content__title">
    @can('acceso-tienda',Auth::user())
    <div class="float-right">
        <button type="button" class="btn btn-lg btn-outline-primary" onclick="location.href='{{ url('cierres/generar') }}'"><i class="zmdi zmdi-lock"></i> Cierre de Caja</button>
        <button type="button" class="btn btn-lg btn-outline-danger" onclick="location.href='{{ url('ventas/manual') }}'"><i class="zmdi zmdi-plus-circle"></i> Venta manual</button>
        <button type="button" class="btn btn-lg btn-outline-success" onclick="location.href='{{ url('ventas/nueva') }}'"><i class="zmdi zmdi-plus-circle"></i> Nueva venta</button>
    </div>
    @endcan
    <h1>VENTAS &nbsp; <a href="#" class="btn-reiniciar"><i class="zmdi zmdi-refresh"></i></a></h1>
    <small>Listado de todas las ventas registradas y sus estados.</small>
</header>

<div class="card">
    <div class="card-body">
        <div class="row justify-content-end">
            <div class="col-sm-4">
                <div class="form-group mb-0">
                    <label>Rango de fechas ventas</label><br>
                    <div class="input-group mb-0">
                        <input type="text" class="form-control form-filter fecha-rango pl-1" placeholder="" autocomplete="off" data-fi="{{ $fecha_inicio }}" data-ft="{{ $fecha_termino }}">
                        <div class="input-group-append">
                            <span class="input-group-text"><i class="zmdi zmdi-calendar"></i></span>
                        </div>
                    </div>
                    <i class="form-group__bar"></i>
                </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 class="thead-default">
                    <tr>
                        <th>DOCUMENTO</th>
                        <th>CLIENTE</th>
                        @if($tiendas)
                        <th>SITIO</th>
                        @endif
                        <th>FECHA</th>
                        <th>F. PAGO</th>
                        <th class="text-right pr-5">MONTO</th>
                        <th class="text-center" width="50">CIERRE</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="1" autocomplete="off">
                                <i class="form-group__bar"></i>
                            </div>
                        </td>
                        @if($tiendas)
                        <td>
                            <div class="select">
                                <select 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>
                        </td>
                        @endif
                        <td></td>
                        <td></td>
                        <td>
                            <div class="form-group mb-0">
                                <input type="text" class="form-control form-filter" placeholder="" data-column="5" autocomplete="off">
                                <i class="form-group__bar"></i>
                            </div>
                        </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() {
    $.extend( true, $.fn.dataTable.defaults, datatables_options);
    $.fn.dataTable.ext.errMode = function ( settings, helpPage, message ) { 
        mensaje('error','ERROR',message);
    };

    var parametros_url = "fi={{$fecha_inicio}}&ft={{$fecha_termino}}";
    var table = $('#datatable_ajax').DataTable({
        ajax: '/ventas/datatables?' + parametros_url,
        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: 'cliente.nombre', 
                name: 'cliente.nombre',
                render: function(data,type,row){
                    if(row.clientes_id){
                        return '<a href="{{ url('clientes/detalle') }}/'+ row.cliente.id +'">'+ (row.cliente.tipo == 'p' ? row.cliente.nombre + (row.cliente.apellidos ? ' ' + row.cliente.apellidos : '') : row.cliente.razon_social) +'</a>'
                    }else{
                        return 'No indicado'
                    }
                }
            },
            @if($tiendas)
            { 
                data: 'tienda', 
                name: 'tienda',
                render: function(data,type,row){
                    return  '<a href="{{ url('tiendas/detalle') }}' + '/' + row.tienda.id +'">'+ row.tienda.nombre +'</a>'
                }
            },
            @endif
            { data: 'fecha', name: 'fecha' },
            { 
                data: 'formas_pago_id', 
                name: 'formas_pago_id',
                render: function(data,type,row){
                    if(row.forma_pago){
                        return row.forma_pago.nombre;
                    }else{
                        return '<span class="badge badge-warning">No indicado</span>'
                    }
                }
            },
            { data: 'monto', name: 'monto', sClass: 'text-right text-cyan' },
            { 
                data: 'estado', 
                name: 'estado',
                sortable: false,
                sClass: 'text-center',
                render: function(data,type,row){
                    if(row.estado){
                        return '<span class="badge badge-success">SI</span>'
                    }else{
                        return '<span class="badge badge-danger">NO</span>'
                    }
                }
            },
        ],
        @if($tiendas)
        order: [[3,'desc']],
        @else
        order: [[2,'desc']],
        @endif
        createdRow: function(row,data,index){
            if($(row,'td:eq(0)').find('a[data-nc="true"]').length){
                $(row).addClass('table-danger');
            }
        }
        ,'stateSave': true
        ,'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){
                        console.log(e.search.search)
                        $(".filter td:eq("+i+") select").val(e.search.search).trigger('change');
                    }
                }
            });
        }
    });

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

    $('#datatable_ajax select').on('select2:select', function(e){
        table
            .column($(this).closest('td').index())
            .search($(this).val())
            .draw();
    });

    $('.fecha-rango').change(function(){
        var fecha_inicio = $(this).data('daterangepicker').startDate.format('DD/MM/YYYY');
        var fecha_termino = $(this).data('daterangepicker').endDate.format('DD/MM/YYYY');
        parametros_url = "fi="+fecha_inicio+"&ft="+fecha_termino;
        window.location.href = '/ventas?' + parametros_url;
    });

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