@extends('layouts.master')


@section('content')
<script type="text/javascript" charset="utf8" src="/assets/scripts/jquery-extendext.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder/dist/js/query-builder.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/jQuery-QueryBuilder/dist/css/query-builder.default.min.css">

<div id="mainContent">
    <div class="container-fluid">

        <!-- Your previous content remains unchanged -->

        <div class="row">
            <div class="col-md-12">
                <h4 class="c-grey-900 mB-20">{{$pageTitle}}</h4>
                <a href="{{ route('pam-reports.index') }}" class="btn btn-success btn-color pull-right">Back</a>
                <br><br>
                    <div class="row">
                        <div class="col-md-12">
                            <div id="builder"></div>
        </div>
            </div>
    </div>
<table id="dataTable" class="display" cellspacing="0" width="100%">
   
    <thead>
            <tr>

            </tr>
            <!-- @foreach($columns as $column)
                <th>{{ ucfirst(str_replace('_', ' ', $column)) }}</th>
            @endforeach -->
       
    </thead>
    <!-- No need to populate the tbody here, DataTables will handle it -->
</table>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>

    var columnsFromController = @json($columns);
    

    // the default rules, what will be used on page loads...
    var datatablesRequest = {};
    var _rules = defaultRules = {
        "condition": "AND",
        "rules": []
    };

    // a button/link that is used to update the rules.
    function updateFilters() {
        _rules = $('#querybuilder').queryBuilder('getRules');
        reloadDatatables();
    }

    function filterChange() {
        var _json = JSON.stringify(_rules);
        datatablesRequest = {
            rules: _json
        };
    }

    filterChange();

    function reloadDatatables() {
        /* Datatables first... */
        filterChange();

        $('.dataTable').each(function() {
            dt = $(this).dataTable();
            dt.fnDraw();
        })
    }

    var dtColumns = columnsFromController.map(function(col) {
    return { data: col, name: col };
});


jQuery(document).ready(function() {

 // Dynamically generate table headers based on columnsFromController
 var thead = $('#dataTable thead tr');
    columnsFromController.forEach(function(col) {
        thead.append('<th>' + col + '</th>');
    });
    // dynamic table
    oTable = jQuery('#dataTable').dataTable({
        serverSide: true,
        ajax: {
            url: '{{ route('pam-reports.payslips') }}',
            data: function(d) {
                $.extend(d, datatablesRequest);
                // Add your custom parameters directly here, if you have any.
            }
        },
        columns: dtColumns
    });

    
    $('#builder').queryBuilder({
    filters: [
        { id: 'id', label: 'ID', type: 'integer' },
        { id: 'earn_def_id', label: 'Earnings Definition ID', type: 'integer' },
        { id: 'earn_def_code', label: 'Earnings Definition Code', type: 'string' },
        { id: 'emp_id', label: 'Employee ID', type: 'integer' },
        { id: 'payslip_id', label: 'Payslip ID', type: 'string' },
        { id: 'man_number', label: 'Employee Number', type: 'string' },
        { id: 'units', label: 'Units', type: 'string' },
        { id: 'year_to_date_total', label: 'YTD Total', type: 'string'},
        { id: 'first_name', label: 'First Name', type: 'string'},
        { id: 'last_name', label: 'Last Name', type: 'string'}
    ]

    
});

        // Listen for changes in the QueryBuilder UI
    $('#builder').on('rulesChanged.queryBuilder', function(e) {
        _rules = $('#builder').queryBuilder('getRules');
        filterChange();
        reloadDatatables();
    });


});

</script>

@endsection