@extends('layout')

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

<header class="content__title">
    <h1>Transferencias</h1>
    <small>Registrados en ventas</small>
    <div class="actions">
        <a href="/reporte-transferencias" class="actions__item zmdi zmdi-refresh-alt"></a>
    </div>
</header>

<div class="card">
    <div class="card-body">
        <div class="row">
            <div class="col-sm-4">
                <div class="form-group 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-4">
                <div class="form-group 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-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">
        <div class="table-responsive">
            <table class="table table-hover mt-0" id="datatable_ajax">
                <thead class="thead-default">
                    <tr>
                        <th width="80">N°</th>
                        <th>BANCO</th>
                        <th>TITULAR</th>
                        <th class="text-right">MONTO</th>
                        <th>FECHA</th>
                        <th>FECHA VENTA</th>
                        <th>TIENDA</th>
                        <th width="30"></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">
                                <div class="select">
                                    <select class="form-control form-filter select2" data-column="1">
                                        <option value="" selected>Todas</option>
                                        @foreach($bancos as $b)
                                        <option value="{{ $b->id }}">{{ $b->nombre }}</option>
                                        @endforeach
                                    </select>
                                    <i class="form-group__bar"></i>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="form-group mb-0">
                                <input type="text" class="form-control form-filter" placeholder="" data-column="2" 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="3" 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-simple" data-reset="true" placeholder="" value="" data-column="4" 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-simple" data-inicio="{{ $fecha_inicio }}" data-termino="{{ $fecha_termino }}" data-end="true" data-reset="true" value="" placeholder="" data-column="5" autocomplete="off">
                                <i class="form-group__bar"></i>
                            </div>
                        </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() {
    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: '/transferencias/datatables?' + parametros_url,
        columns: [
            { data: 'id', name: 'id' },
            { 
                data: 'transferencias.bancos_id', 
                name: 'transferencias.bancos_id',
                render: function(data,type,row){
                    return row.banco.nombre
                }
            },
            { data: 'titular', name: 'titular'},
            { data: 'monto', name: 'monto', sClass: 'text-right text-cyan' },
            { data: 'transferencias.fecha', name: 'transferencias.fecha', sClass: 'text-center' },
            { 
                data: 'ventas.fecha',
                name: 'ventas.fecha',
                sClass: 'text-center',
                render: function(data,type,row){
                    if(row.venta.tipo == 'b'){
                        return '<a href="{{ url('ventas/detalle') }}' + '/' + row.venta.id +'">BOLETA N°' +row.venta.id+ '<br>'+ row.ventas.fecha +'</a>'
                    }else{
                        return '<a href="{{ url('ventas/detalle') }}' + '/' + row.venta.id +'">FACTURA N°' +row.venta.id+ '<br>'+ row.ventas.fecha +'</a>'
                    }
                }
            },
            { 
                data: 'ventas.tiendas_id', 
                name: 'ventas.tiendas_id',
                render: function(data,type,row){
                    return '<a href="{{ url('tiendas/detalle') }}/'+ row.ventas.tiendas_id.id +'">'+ row.ventas.tiendas_id.nombre +'</a>'
                }
            },
            { 
                sortable: false,
                render: function(data,type,row){
                    if(1){
                        return '<a href="#" class="text-warning validar-transferencia" data-id="'+row.id+'"><i class="zmdi zmdi-check-circle zmdi-hc-lg"></i></a>'
                    }else{
                        return '<span class="text-success"><i class="zmdi zmdi-check-circle zmdi-hc-lg"></i></span>'
                    }
                }
            },
        ]
    });

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

    $('.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();
    });

    $('.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-transferencias?' + 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-transferencias?' + parametros_url;
    });
    $('#tienda').on('select2:select', function(){
        parametros_url = "fi={{$fecha_inicio}}&ft={{$fecha_termino}}&grupo={{$grupo}}&tienda="+$(this).val();
        window.location.href = '/reporte-transferencias?' + parametros_url;
    });

    $(document).on('click','.validar-transferencia',function(e){
        e.preventDefault();
        console.log($(this).data('id'))
    });
});
</script>
@endpush