@extends('layout')

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

<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='/cierres/generar'"><i class="zmdi zmdi-lock"></i> Generar</button>
    </div>
    @endcan
    <h1>CIERRES DE CAJA &nbsp; <a href="#" class="btn-reiniciar"><i class="zmdi zmdi-refresh"></i></a></h1>
    <small>Ventas y gastos por día.</small>
</header>

<div class="card">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mt-0" id="datatable_ajax">
                <thead class="thead-default">
                    <tr>
                        <th>FECHA</th>
                        @if($tiendas)
                            <th>TIENDA</th>
                        @endif
                        <th class="text-right">INICIAL</th>
                        <th class="text-right">VENTAS</th>
                        <th class="text-right">GASTOS</th>
                        <th class="text-right">RETIRO</th>
                        <th class="text-right">FINAL</th>
                        <th class="text-right">SALDO</th>
                    </tr>
                    <tr class="filter">
                        <td>
                            <div class="form-group mb-0">
                                <input type="text" class="form-control form-filter fecha-simple" placeholder="" data-column="0" autocomplete="off" data-end="true" data-reset="true" value="">
                                <i class="form-group__bar"></i>
                            </div>
                        </td>
                        @if($tiendas)
                        <td>
                            <div class="form-group mb-0">
                                <div class="select">
                                    <select class="form-control form-filter select2" data-column="1">
                                        <option value="" selected>Todas</option>
                                        @foreach($tiendas as $t)
                                        <option value="{{ $t->id }}">{{ $t->nombre }}</option>
                                        @endforeach
                                    </select>
                                    <i class="form-group__bar"></i>
                                </div>
                            </div>
                        </td>
                        @endif
                        <td></td>
                        <td></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() {
    $.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: '{{ url('cierres/datatables') }}',
        order: [[0, 'desc']],
        drawCallback: function( settings ) {
             $('[data-toggle="tooltip"]').tooltip();
             $('[data-toggle="popover"]').popover();
        },
        columns: [
            { 
                data: 'fecha', 
                name: 'fecha',
                render: function(data,type,row){
                    var html = '<a href="{{ url('cierres/detalle') }}/'+ row.id +'" data-confirmado="'+(row.fecha_confirmacion ? true : false)+'">Cierre día '+ row.fecha +'</a><div class="listview__attrs">';
                    html += row.comprobante_retiro ? '<span><a href="/descargar-comprobante/'+row.id+'/retiro"><i class="zmdi zmdi-download text-success"></i> Comprobante retiro</a></span>' : '<span class="text-muted"><i class="zmdi zmdi-minus-circle"></i> Comprobante retiro</span>';
                    html += row.comprobante_transbank ? '<span><a href="/descargar-comprobante/'+row.id+'/transbank"><i class="zmdi zmdi-download text-success"></i> Comprobante transbank</a></span>' : '<span class="text-muted"><i class="zmdi zmdi-minus-circle"></i> Comprobante transbank</span>';

                    @can('acceso-finanzas',Auth::user())
                    html += !row.fecha_confirmacion ? '<span><a href="#" class="confirmar-cierre" data-id="'+row.id+'" data-toggle="tooltip" data-original-title="Confirmar"><i class="zmdi zmdi-thumb-up"></i></a></span>' : '';
                    @endcan

                    html += '</div>';
                    return html;
                }
            },
            @if($tiendas)
            { 
                data: 'tiendas_id', 
                name: 'tiendas_id',
                render: function(data,type,row){
                    return '<a href="{{ url('tiendas/detalle') }}/'+ row.tienda.id +'">'+ row.tienda.nombre +'</a>'
                }
            },
            @endif
            { data: 'inicio', name: 'inicio', sClass: 'text-right', sortable: false },
            { 
                data: 'monto', 
                name: 'monto',
                sClass: 'text-right text-green',
                render: function(data,type,row){
                    return '<span data-toggle="popover" data-trigger="hover" data-html="true" data-original-title="' + row.monto.titulo + '" data-content="' + row.monto.content + '">' + row.monto.total + '</span>';
                }, 
                sortable: false 
            },
            { data: 'gasto', name: 'gasto', sClass: 'text-right text-red', sortable: false },
            { data: 'retiro', name: 'retiro', sClass: 'text-right text-blue', sortable: false },
            { data: 'cierre', name: 'cierre', sClass: 'text-right', sortable: false },
            { 
                sClass: 'text-right', 
                sortable: false,
                render: function(data,type,row){
                    if(row.saldo == 0){
                        return '$0';
                    }else if(row.saldo > 0){
                        return '<span class="text-danger">-$' + number_format(Math.abs(row.saldo),0,'.','.') + '</span>';
                    }else{
                        return '<span class="text-success">$' + number_format(Math.abs(row.saldo),0,'.','.') + '</span>';
                    }
                }
            },
        ],
        createdRow: function(row,data,index){
            if($(row,'td:eq(0)').find('a[data-confirmado="true"]').length){
                $(row).addClass('table-success');
            }
        }
        ,'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');
                    }
                }
            });
        }
    });

    $('.fecha-simple').change(function(){
        table
            .columns($(this).data('column'))
            .search($(this).val())
            .draw();
    });

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

    @can('acceso-finanzas',Auth::user())
    $(document).on('click','.confirmar-cierre',function(e){
        e.preventDefault();
        $('[data-toggle="tooltip"]').tooltip('hide');
        var elem = $(this);
        $.ajax({
            url: '/cierres/confirmar/'+elem.data('id')
            ,type: 'POST'
            ,data: { _token: '{{ csrf_token() }}' }
            ,dataType: 'json'
        })
        .done(function(json){
            if(json.result){
                elem.closest('tr').addClass('table-success');
                elem.closest('span').remove();
                mensaje('success','OK','Cierre confirmado');
            }else{
                mensaje('error','ERROR',json.msg);
            }
        });
    });
    @endcan

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