@include('header')

<style>
    /* General Styles for Pagination */
    .pagination {
        display: flex;
        justify-content: center;
        list-style: none;
        margin: 0;
        font-family: Arial, sans-serif;
    }

    .pagination li {
        margin: 0 10px;
    }

    /* Styling for Pagination Links */
    .pagination li a {
        text-decoration: none;
        color: #007bff;
        font-size: 14px;
        padding: 8px 15px;
        border: 1px solid #007bff;
        border-radius: 5px;
        transition: all 0.3s ease;
    }

    /* Active Link Hover State */
    .pagination li a:hover {
        background-color: #007bff;
        color: white;
        border-color: #0056b3;
    }

    /* Disabled State */
    .pagination li.disabled {
        pointer-events: none;
        opacity: 0.6;
        color: #ddd;
    }

    .pagination li.disabled i {
        color: #ddd;
    }

    /* Arrow Icons Styling */
    .pagination li i {
        margin-right: 5px;
        font-size: 16px;
    }

    /* Styling for Previous and Next Links */
    .pagination li a,
    .pagination li.disabled {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Pagination Container Alignment */
    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Optional: Add some responsive adjustments */
    @media (max-width: 767px) {
        .pagination li a {
            font-size: 12px;
            padding: 6px 12px;
        }
    }
</style>

<section class="space-top space-extra-bottom t-margin">
    <div class="container">
        <div class="th-sort-bar">
            <div class="row justify-content-between align-items-center">
                <div class="col-md"><BR>
                    <h3 style="text-align:center;">{{ $title }}</h3>
                </div>
            </div>
        </div>

        <div class="row gy-40">
            @foreach ($products as $product)
                <div class="col-xl-3 col-lg-4 col-sm-6">
                    <div class="th-product product-grid mob-dev">
                        <a href="{{ url('/product-details/' . $product->id) }}">
                            <div class="product-img">
                                <img src="{{ asset('uploads/products/' . $product->img) }}"
                                    alt="{{ $product->brand_name }}">
                                <!-- <span class="product-tag">
@if ($product->top === 'Yes')
TOP
@endif
</span> -->
                            </div>
                        </a>
                        <div class="product-content">
                            <h3 class="product-title"><a
                                    href="{{ url('/product-details/' . $product->id) }}">{{ $product->brand_name }}</a>
                            </h3>
                            <span style="font-size: 12px;color: black;">{!! \App\Models\Generic::where('id', $product->generic_name)->value('name') !!}</span>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <div style="margin-top: 84px;">

            <ul class="pagination">
                <!-- Previous Page Link -->
                @if ($products->onFirstPage())
                    <li class="disabled"><i class="far fa-arrow-left"></i> Prev</li>
                @else
                    <li><a href="{{ $products->previousPageUrl() }}" rel="prev"><i class="far fa-arrow-left"></i>
                            Prev</a></li>
                @endif

                <!-- Next Page Link -->
                @if ($products->hasMorePages())
                    <li><a href="{{ $products->nextPageUrl() }}" rel="next"><i class="far fa-arrow-right"></i>
                            Next</a></li>
                @else
                    <li class="disabled"><i class="far fa-arrow-right"></i> Next</li>
                @endif
            </ul>

        </div>

    </div>
</section>


@include('footer')