@extends('masushuaia.plantilla')
@section('titulo', "Historial de consumos del beneficiario")
@section('scripts')
<link href="{{ asset('css/datatables.min.css') }}" rel="stylesheet">
<script src="{{ asset('js/datatables.min.js') }}"></script>
<script>
    globalId = '0';
    </script>
@endsection
@section('breadcrumb1')
<a title="Salir" href="#" class="btn-blue py-1 px-2 mr-2" aria-hidden="true" onclick="javascript: $('#modalSalir').modal('toggle');"><span><i class="fas fa-arrow-left"></i></span></a>
<script>
    function fsalir() {
        location.href = "/beneficiarios";
    }
</script>
@endsection
@section('breadcrumb')
<div class="row">
    <div class="col-6 text-left form-group pt-3">
        <label class="periodo" for="txtFechaDesdeEstadistica">Período desde</label>
        <input type="date" class="form-control" id="txtFechaDesdeEstadistica" name="txtFechaDesdeEstadistica" onchange="actualizarGrilla()" value="2024-12-01">
    </div>
    <div class="col-6 text-left form-group pt-3">
        <label class="periodo" for="txtFechaHastaEstadistica">Período hasta</label>
        <input type="date" class="form-control" id="txtFechaHastaEstadistica" name="txtFechaHastaEstadistica" onchange="actualizarGrilla()" value="2025-12-31">
    </div>
</div>
@endsection
@section('breadcrumb-list')
<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="/">Inicio</a></li><span class="px-2">/</span>
  <li class="breadcrumb-item"><a href="/beneficiarios">Beneficiarios</a></li>
  <li class="breadcrumb-item active">Historial consumos</li>
</ol>
@endsection
@section('contenido')
    <div class="row">
        <div class="col-12">
            <div class="card mb-3">
                <div class="card-header">
                    <i class="fa fa-table"></i> Historial de cupones
                </div>
                <div class="panel-body p-2">
                    <table id="grilla" class="display" style="width:98%">
                        <thead>
                            <tr>
                                <th>Fecha</th>
                                <th>Cupon</th>
                                <th>Beneficiario</th>
                                <th>Comercio</th>
                                <th>Rubro</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
<script>
    idbeneficiario = 
    function cargarGrillaCuponesHistorial(){
        $('#grilla').dataTable().fnClearTable();
        $('#grilla').dataTable().fnDestroy();
        var dataTable = $('#grilla').DataTable({
            "processing": true,
            "serverSide": true,
            "bFilter": true,
            "bInfo": true,
            "bSearchable": true,
            "pageLength": 25,
            "order": [[ 0, "desc" ]],
            "ajax": "{{ route('cuponesHistorialBeneficiario.cargarGrilla') }}?fechaDesde=" + $("#txtFechaDesdeEstadistica").val() + "&fechaHasta=" + $("#txtFechaHastaEstadistica").val() + "&idbeneficiario=" + idbeneficiario
        });
    }

    function cargarGrillaCuponesHistorialInicial(){
        var dataTable = $('#grilla').DataTable({
            "processing": true,
            "serverSide": true,
            "bFilter": true,
            "bInfo": true,
            "bSearchable": true,
            "pageLength": 25,
            "order": [[ 0, "desc" ]],
            "ajax": "{{ route('cuponesHistorialBeneficiario.cargarGrilla') }}?fechaDesde=" + $("#txtFechaDesdeEstadistica").val() + "&fechaHasta=" + $("#txtFechaHastaEstadistica").val() + "&idbeneficiario=" + idbeneficiario
        });
    }


    function actualizarGrilla(){
        cargarGrillaCuponesHistorial();
    }
    
    cargarGrillaCuponesHistorialInicial();
    
</script>
@endsection