@extends('layout')

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

<header class="content__title">
    <h1>Gastos</h1>
    <small>Registrados en cierres de caja</small>
    <div class="actions">
        <a href="#" class="actions__item zmdi zmdi-download descargar-excel"></a>
        <a href="/reporte-gastos" class="actions__item zmdi zmdi-refresh-alt"></a>
    </div>
</header>

<div class="card">
    <div class="card-body p-0">
        <div class="row no-gutters">
            <div class="col-sm-3">
                <div class="form-group m-3 mb-0">
                    <label>Grupo</label>
                    <div class="select">
                        <select id="grupo" class="form-control select2">
                            <option value="">Todos</option>
                            @foreach($grupos as $g)
                            <option value="{{ $g->id }}">{{ $g->nombre }}</option>
                            @endforeach
                        </select>
                        <i class="form-group__bar"></i>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="form-group m-3 mb-0">
                    <label>Tienda</label>
                    <div class="select">
                        <select id="tienda" 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>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="form-group m-3 mb-0">
                    <label>Rango de fechas</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 class="col-sm-3">
                <div class="invoice__attrs__item bg-red mb-0">
                    <small class="text-white">Total Gastos</small>
                    <h3 class="text-white">${{ number_format($total_gastos,0,'.','.') }}</h3>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mt-0" id="datatable_ajax">
                <thead>
                    <tr>
                        <th width="80">N°</th>
                        <th>ITEM</th>
                        <th>TIENDA</th>
                        <th>FECHA</th>
                        <th>MONTO</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>
                        <td></td>
                        <td></td>
                        <td>
                            <div class="form-group mb-0">
                                <input type="text" class="form-control form-filter" placeholder="" data-column="4" 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() {
    var parametros_url = "fi={{$fecha_inicio}}&ft={{$fecha_termino}}&grupo={{$grupo}}&tienda={{$tienda}}";
    $.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: '/gastos/datatables?' + parametros_url,
        columns: [
            { data: 'id', name: 'id' },
            { data: 'item', name: 'item' },
            { 
                data: 'tiendas_id', 
                name: 'tiendas_id',
                render: function(data,type,row){
                    return '<a href="{{ url('tiendas/detalle') }}/'+ row.tienda.id +'">'+ row.tienda.nombre +'</a>'
                }
            },
            { data: 'fecha', name: 'fecha' },
            { data: 'monto', name: 'monto', sClass: 'text-right' },
        ]
    });

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

    $('.filter select').on('select2:select', function(){
        table
            .column($(this).data('column'))
            .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+"&grupo={{$grupo}}&tienda={{$tienda}}";
        window.location.href = '/reporte-gastos?' + parametros_url;
    });

    @if($tienda)
    if($('#tienda option[value="'+{{ $tienda }}+'"]')[0])
        $('#tienda').val({{ $tienda }}).trigger('change');
    @endif
    @if($grupo)
    if($('#grupo option[value="'+{{ $grupo }}+'"]')[0])
        $('#grupo').val({{ $grupo }}).trigger('change');
    @endif

    $('#grupo').on('select2:select', function(){
        parametros_url = "fi={{$fecha_inicio}}&ft={{$fecha_termino}}&grupo="+$(this).val()+"&tienda=";
        window.location.href = '/reporte-gastos?' + parametros_url;
    });
    $('#tienda').on('select2:select', function(){
        parametros_url = "fi={{$fecha_inicio}}&ft={{$fecha_termino}}&grupo={{$grupo}}&tienda="+$(this).val();
        window.location.href = '/reporte-gastos?' + parametros_url;
    });

    $('.descargar-excel').click(function(e){
        e.preventDefault();
        window.location.href = '/excel-gastos?' + parametros_url;
    });
    
});
</script>
@endpush