Laravel 7 Pagination and Bootstrap Tabs

I've been struggling with this issue for days now.

Basically I use Laravel 7 and Bootstrap tabs called 'All Products' and 'Special Products'.

The problem is: I want to paginate the results, but it doesn't work quite as expected. For example, the initial active tab is 'All Products', if i click page 3 on that tab and switch to 'Special Products' tab, it loads page 3 of that tab as well instead of page 1. I hope this makes sense?

My controller file:

public function index()
    {

        $products = Product::with('brands')->paginate(1,['*'],'products');

        $specials = Product::where([
            ['discount', '!=', null],
            ['discount', '!=', '0']
        ])->paginate(1,['*'],'specials ');

        return view('products.index', ['products' => $products, 'specials ' => $specials ]);

    }

My view file:

<div class="tab-content">
    <div class="tab-pane active" id="allproducts">
        <table class="table table-hover">
            <thead class="text-primary font-weight-bold">
                <th>Product Name</th>
                <th>Brand</th>
                <th>Unit</th>
                <th>Price</th>
                <th>Discount</th>
            </thead>
            <tbody>
                @foreach ($products as $product)
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                @endforeach
            </tbody>
        </table>       

        

    </div>

    <div class="tab-pane" id="specialproducts">
        <table class="table table-hover">
            <thead class="text-primary font-weight-bold">
                <th>Product Name</th>
                <th>Brand</th>
                <th>Unit</th>
                <th>Price</th>
                <th>Discount</th>
            </thead>
            <tbody>
                @foreach ($specials as $special)
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>                                                 
                @endforeach
            </tbody>
        </table>

        

    </div>
</div> <!-- end tab content -->

Can someone guide me please?

Thank you.

via Chebli Mohamed