Pass data from ajax call to Controller

I am trying to pass 2 dates to the controller to filter data table by custom date range. My problem is I am unable to pass any data from JS to the controller. It always returns null

View

<div class="row input-daterange">
                <div class="col-md-4">
                    <input type="text" name="from_date" id="from_date" class="form-control datepicker-activity" placeholder="From Date" readonly />
                </div>
                <div class="col-md-4">
                    <input type="text" name="to_date" id="to_date" class="form-control datepicker-activity" placeholder="To Date" readonly />
                </div>
                <div class="col-md-4">
                    <button type="button" name="filter" id="filter" class="btn btn-primary">Filter</button>
                    <button type="button" name="refresh" id="refresh" class="btn btn-default">Refresh</button>
                </div>
            </div>

        </div>
        <!-- Card-Body -->
        <div class="card-body">

            <table id="mainJobsTable" class="table table-bordered table-hover JobsTable" width="100%">
                <thead>
                    <tr>
                        <!-- 0 -->
                        <th>ID</th>
                        <!-- 1 -->
                        <th>Action</th>
                        <!-- 2 -->
                        <th>JobID</th>

My JS

    load_data();

    // DataTable
    function load_data(from_date = "", to_date = "") {
        $("#mainJobsTable").DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "mainActivity",
                type: "GET",

                data: function(data) {
                    for (var i = 0, len = data.columns.length; i < len; i++) {
                        if (!data.columns[i].search.value)
                            delete data.columns[i].search;
                        if (data.columns[i].searchable === true)
                            delete data.columns[i].searchable;
                        if (data.columns[i].orderable === true)
                            delete data.columns[i].orderable;
                        if (data.columns[i].data === data.columns[i].name)
                            delete data.columns[i].name;
                    }
                    delete data.search.regex;
                },
                function(d) {
                    d.from_date = $(input[(name = from_date)]).val();
                    d.to_date = $(input[(name = to_date)]).val();
                }
            },

            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
            },

            dom:
                "<'row'<'col'l>" /* Length changing input control */ +
                "<'col'B>" /* Buttons */ +
                "<'col'f>>" /* Filtering Input */ +
                "<'row'<'col'tr>>" /* The Table! + Processing Display Element*/ +
                "<'row'<'col'i>" /* Table Information Summary */ +
                "<'col'p>>" /* Pagination Control*/,

            order: [[18, "asc"]],

            columns: [
                /* 0 */ {
                    data: "id",
                    name: "id",
                    visible: false
                },
                /* 1 */ {
                    data: "action",
                    name: "action",
                    orderable: false,
                    searchable: false
                },
                /* 2 */ {
                    data: "job_id",
                    name: "job_id"
                },
                /* 3 */ {
                    data: "type",
                    name: "type"
                },    load_data();

    // DataTable
    function load_data(from_date = "", to_date = "") {
        $("#mainJobsTable").DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "mainActivity",
                type: "GET",

                data: function(data) {
                    for (var i = 0, len = data.columns.length; i < len; i++) {
                        if (!data.columns[i].search.value)
                            delete data.columns[i].search;
                        if (data.columns[i].searchable === true)
                            delete data.columns[i].searchable;
                        if (data.columns[i].orderable === true)
                            delete data.columns[i].orderable;
                        if (data.columns[i].data === data.columns[i].name)
                            delete data.columns[i].name;
                    }
                    delete data.search.regex;
                },
                function(d) {
                    d.from_date = $(input[(name = from_date)]).val();
                    d.to_date = $(input[(name = to_date)]).val();
                }
            },

            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
            },

            dom:
                "<'row'<'col'l>" /* Length changing input control */ +
                "<'col'B>" /* Buttons */ +
                "<'col'f>>" /* Filtering Input */ +
                "<'row'<'col'tr>>" /* The Table! + Processing Display Element*/ +
                "<'row'<'col'i>" /* Table Information Summary */ +
                "<'col'p>>" /* Pagination Control*/,

            order: [[18, "asc"]],

            columns: [
                /* 0 */ {
                    data: "id",
                    name: "id",
                    visible: false
                },
                /* 1 */ {
                    data: "action",
                    name: "action",
                    orderable: false,
                    searchable: false
                },
                /* 2 */ {
                    data: "job_id",
                    name: "job_id"
                },
                /* 3 */ {
                    data: "type",
                    name: "type"
                },

 rowGroup: {
                dataSrc: "due_date"
            }
        });
    }


$("#filter").click(function() {
        var from_date = $("#from_date").val();
        var to_date = $("#to_date").val();

        console.log(from_date, to_date);

        if (from_date != "" && to_date != "") {
            $("#mainJobsTable")
                .DataTable()
                .destroy();
            load_data(from_date, to_date);
        } else {
            alert("Both Date is required");
        }
    });

My Controller

public function mainActivity(Request $request)
    {

        $usersite = Auth::user()->site;

        // dd($request->from_date);

        if (request()->ajax()) {

            if (!empty($request->from_date)) {
                $jobs = Job::wheremfg_site($usersite)->whereStatus('Completed')->whereBetween('completed_at', [$request->get(from_date), $request->geta(to_date)])->get();
            } else {
                $jobs = Job::wheremfg_site($usersite)->whereStatus('Completed')->get();
            }

            return DataTables::of($jobs)
                ->addColumn('action', function ($jobs) {
                    $button = '<div class="btn-group btn-group-xs">';
                    $button .= '<a href="/activity/' . $jobs->id . '/edit" class="btn btn-primary btn-xs"><i class="fa fa-edit fa-fw"></i>&nbsp;Edit</a>';
                    $button .= '<button type="button" name="deleteButton" id="' . $jobs->id . '" data-jobcycid="' . $jobs->job_no . ' | ' . $jobs->cyc_no . '" class="btn btn-danger btn-xs deleteButton"><i class="fas fa-trash-alt"></i>&nbsp;Delete</button>';
                    $button .= '</div>';
                    return $button;
                })

               return datatables()->of($jobs)->make(true);

                })

My problem is I cannot pass from_date variable from JS to Controller.

This is a very long code. Hence kindly apolagize fro the typo and other mistakes I had to do to make it short.