@include('website.layout.header')

<!-- Search Results -->
<div class="search-results">
    @if ($products->count())
        <div class="products">
            @foreach ($products as $product)
                <a href="{{ route('products.single', $product->id) }}" class="slide-link">
                    <div class="product">
                        <h2>{{ $product->name }}</h2>
                        <img src="{{ Storage::url($product->image) }}" alt="Product {{ $loop->iteration }}" class="slide-image" />
                        <h3>{{ $product->short_desc }}</h3>
                        <p>{{ $product->product_spec }}</p>
                    </div>
                </a>
            @endforeach
        </div>

        <!-- Pagination Links -->
        <div class="pagination">
            {{ $products->links() }}
        </div>
    @else
        <div class="no-results">
            <p style="font-size: 52px">للاسف لم يتم الحصول علي المنتج .</p>
            <img src="{{ asset('images/images.png') }}" alt="No products found" class="no-results-image" />
        </div>
    @endif
</div>

<!-- Slider Section -->
<div class="boxs">
    <div class="box">
        @foreach ($sliders as $slider)
            <img src="{{ Storage::url($slider->image) }}" alt="Slider {{ $loop->iteration }}" class="slider-image" />
        @endforeach
    </div>
</div>

<!-- Companies Section -->
<div class="company">
    <div class="container">
        <div class="title">نحن نشحن بضائعنا مع شركة</div>
        <div class="logos">
            @foreach ($companies as $item)
                <img src="{{ Storage::url($item->image) }}" alt="Company {{ $loop->iteration }}" class="company-logo" />
            @endforeach
        </div>
    </div>
</div>

<!-- Footer -->
<div class="footer">
    <p>Developed by: <span>Abdallh Elzayat</span></p>
</div>

<!-- Scripts -->
<script src="../js/script.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<!-- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> -->
<!-- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script> -->
<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> -->
</body>
</html>