{{-- Web Slider (for larger screens) --}}
{{-- <div class="relative overflow-hidden d-none d-lg-block">
    <div class="swiper mySwiperWeb">
        <div class="swiper-wrapper">
            @foreach ($webSliders as $slider)
                <div class="swiper-slide relative h-[500px]">
                    <div class="absolute inset-0 bg-cover bg-center"
                         style="background-image: url({{ asset('storage/' . $slider->background_image) }});">
                        <div class="absolute inset-0 bg-black/50"></div>
                    </div>

                    <div class="container relative z-10 h-full">
                        <div class="flex items-center h-full">
                            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
                                <div class="space-y-6 animate-fadeIn">
                                    @if ($slider->slider_text)
                                        <span class="text-sm md:text-base text-primary-500 font-medium">
                                            {!! $slider->slider_text !!}
                                        </span>
                                    @endif

                                    @if ($slider->name)
                                        <h2 class="text-2xl md:text-4xl font-bold text-white">
                                            {{ $slider->name }}
                                        </h2>
                                    @endif

                                    @if ($slider->button_text)
                                        <div class="pt-4">
                                            <a href="{{ $slider->link ?? '#' }}"
                                               class="inline-block px-6 py-3 bg-primary-500 text-white rounded-lg
                                                      hover:bg-primary-600 transition duration-300">
                                                {!! $slider->button_text !!}
                                            </a>
                                        </div>
                                    @endif
                                </div>

                                @if ($slider->image)
                                    <div class="animate-slideIn">
                                        <img src="{{ asset('storage/' . $slider->image) }}"
                                             alt="{{ $slider->name }}"
                                             class="w-full h-auto object-cover rounded-lg shadow-lg">
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="swiper-pagination !bottom-6"></div>
    </div>
</div> --}}

{{-- Mobile Slider (for smaller screens) --}}
{{-- <div class="relative overflow-hidden d-lg-none">
    <div class="swiper mySwiperMobile">
        <div class="swiper-wrapper">
            @foreach ($mobileSliders as $slider)
                <div class="swiper-slide relative h-[400px]">
                    <div class="absolute inset-0 bg-cover bg-center"
                         style="background-image: url({{ asset('storage/' . $slider->background_image) }});">
                        <div class="absolute inset-0 bg-black/50"></div>
                    </div>

                    <div class="container relative z-10 h-full px-4">
                        <div class="flex flex-col justify-center h-full space-y-6">
                            @if ($slider->slider_text)
                                <span class="text-sm text-primary-500 font-medium">
                                    {!! $slider->slider_text !!}
                                </span>
                            @endif

                            @if ($slider->name)
                                <h2 class="text-xl font-bold text-white">
                                    {{ $slider->name }}
                                </h2>
                            @endif

                            @if ($slider->image)
                                <div class="w-full max-w-xs mx-auto">
                                    <img src="{{ asset('storage/' . $slider->image) }}"
                                         alt="{{ $slider->name }}"
                                         class="w-full h-auto object-cover rounded-lg shadow-lg">
                                </div>
                            @endif

                            @if ($slider->button_text)
                                <div class="pt-4">
                                    <a href="{{ $slider->link ?? '#' }}"
                                       class="inline-block px-6 py-3 bg-primary-500 text-white rounded-lg
                                              hover:bg-primary-600 transition duration-300">
                                        {!! $slider->button_text !!}
                                    </a>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="swiper-pagination !bottom-6"></div>
    </div>
</div> --}}



<div class="swiper mySwiper">
    <div class="swiper-wrapper">
        @foreach ($webSliders as $slider)
            <div class="swiper-slide" style="background-image: url({{ asset('storage/' . $slider->background_image) }});">
                <div class="swiper-overlay"></div>
                <div class="container">
                    <div class="swiper-content wow bounceInDown">
                        <div class="row align-items-center">
                            <div class="col-lg-6">
                                <div class="swiper-slide-info">
                                    <span class="pretitle">{{ $slider->name }}</span>
                                    <h3 class="heading">
                                        {{ $slider->slider_text }}
                                    </h3>
                                    {{-- <div class="product-price">
                                        <div class="current">{{ $slider->current_price }}<span>L.E</span></div>
                                        <div class="discount">{{ $slider->old_price }}<span>L.E</span></div>
                                    </div> --}}
                                    <div class="swiper-slide-action">
                                        @if ($slider->button_text != null)
                                            <a href="{{ $slider->link }}">{{ $slider->button_text }}</a>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="header-pro-img">
                                    @if ($slider->image != null)
                                    <img src="{{ asset('assets/images/' . $slider->image) }}" alt="{{ $slider->title }}">

                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
</div>