@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" style="margin-top:75px;">
    <div class="container">
        <div class="th-sort-bar">
            <div class="row justify-content-between align-items-center">
                <div class="col-md">
                <h3 style="text-align:center;"><i class="fa fa-search" aria-hidden="true"></i> {{$title}}</h3>

                    <style>
                        .tab-grid-wrapper {
                            max-width: 100%;
                            margin: 10px auto;
                            padding: 10px;
                            background-color: #f8fafc;
                            border-radius: 12px;
                            box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
                            font-family: 'Segoe UI', sans-serif;
                            font-size: 12px;
                            height: 180px;
                            overflow-y: auto;
                            line-height: normal;
                        }

                        .tab-grid-container {
                            display: grid;
                            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
                            gap: 5px;
                        }

                        .tab-cell {
                            background: white;
                            border: 1px solid #e2e8f0;
                            border-radius: 10px;
                            padding: 10px 10px;
                            text-align: center;
                            text-decoration: none;
                            color: #1a202c;
                            font-weight: 600;
                            transition: all 0.25s ease;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            height: 50px;
                            min-width: 140px;
                        }

                        .tab-cell:hover {
                            background-color: #ebf4ff;
                            color: #2b6cb0;
                            box-shadow: 0 4px 12px rgba(66, 153, 225, 0.15);
                            transform: translateY(-2px);
                        }

                        .tab-cell.active {
                            background-color: #3182ce;
                            color: #fff;
                            font-weight: 700;
                            border-color: #3182ce;
                            box-shadow: 0 4px 12px rgba(49, 130, 206, 0.4);
                        }

                        @media (max-width: 480px) {
                            .tab-cell {
                                font-size: 14px;
                                height: 50px;
                            }
                        }
                    </style>

                    <div class="tab-grid-wrapper">
                        <div class="tab-grid-container">
                            @foreach ($search as $id => $name)
                                <a href="{{ url('/search/' . $type . '/' . $id) }}"
                                    class="tab-cell {{ request()->segment(3) == $id ? 'active' : '' }}">
                                    {{ htmlspecialchars_decode(strip_tags($name)) }}
                                </a>
                            @endforeach
                        </div>
                    </div>

                </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')