@php
$sliders = App\Models\Slider::where('status','active')->get();
@endphp

@push('styles')
    <style>
/* Slider Custom Styles */
.slider-item {
    background: #000;
    border-radius: 10px;
    overflow: hidden;
}

.slider-image {
    transition: transform 0.5s ease;
}

.slider-item:hover .slider-image {
    transform: scale(1.05);
}

/* Overlay Animation */
.overlay {
    transition: all 0.3s ease;
}

.slider-item .overlay {
    opacity: 0;
    transition: all 0.5s ease;
}

.slider-item:hover .overlay {
    opacity: 1;
}

/* Text Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate__fadeInUp {
    animation: fadeInUp 0.6s ease forwards;
}

.animate__delay-1s {
    animation-delay: 0.3s;
    opacity: 0;
}

.animate__delay-2s {
    animation-delay: 0.6s;
    opacity: 0;
}

/* Ensure all owl carousel items have equal size */
.owl-carousel .owl-stage {
    display: flex;
}

.owl-carousel .owl-item {
    display: flex;
    height: auto;
}

.owl-carousel .owl-item .slider-item {
    height: 435px;
    width: 100%;
}

/* Ensure images fill container properly */
.owl-carousel .owl-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .slider-item {
        height: 300px !important;
    }

    .owl-carousel .owl-item .slider-item {
        height: 300px;
    }

    .overlay h2 {
        font-size: 1.5rem;
    }

    .overlay p {
        font-size: 0.9rem;
        max-width: 90% !important;
    }

    .overlay {
        padding: 1.5rem !important;
    }
}

@media (max-width: 576px) {
    .slider-item {
        height: 250px !important;
    }

    .owl-carousel .owl-item .slider-item {
        height: 250px;
    }

    .overlay h2 {
        font-size: 1.2rem;
    }

    .overlay p {
        font-size: 0.8rem;
    }

    .btn {
        font-size: 0.85rem;
        padding: 0.4rem 1rem !important;
    }
}


</style>
@endpush
<!-- Main News Slider Start -->
<div class="container-fluid py-3">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="owl-carousel owl-carousel-2 carousel-item-1 position-relative mb-3 mb-lg-0">
                    @forelse($sliders as $slider)
                        <div class="position-relative overflow-hidden slider-item" style="height: 435px; width: 100%;">
                            <img class="img-fluid w-100 h-100 slider-image" src="{{asset($slider->image)}}" alt="{{ $slider->title ?? 'Slider Image' }}" style="object-fit: cover; object-position: center;">

                            @if($slider->title || $slider->subtitle)
                                <div class="overlay position-absolute w-100 h-100 d-flex flex-column justify-content-center align-items-start p-5"
                                     style="top: 0; left: 0; background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 100%);">
                                    @if($slider->title)
                                        <h2 class="text-white mb-2 animate__animated animate__fadeInUp">{{ $slider->title }}</h2>
                                    @endif
                                    @if($slider->subtitle)
                                        <p class="text-white mb-3 animate__animated animate__fadeInUp animate__delay-1s" style="max-width: 70%;">
                                            {{ $slider->subtitle }}
                                        </p>
                                    @endif
                                    @if($slider->button_text && $slider->button_link)
                                        <a href="{{ $slider->button_link }}" class="btn btn-primary rounded-pill px-4 py-2 animate__animated animate__fadeInUp animate__delay-2s">
                                            {{ $slider->button_text }} <i class="fas fa-arrow-right ms-2"></i>
                                        </a>
                                    @endif
                                </div>
                            @endif
                        </div>
                    @empty
                        <div class="position-relative overflow-hidden" style="height: 435px; width: 100%;">
                            <img class="img-fluid w-100 h-100" src="{{ asset('img/news-700x435-1.jpg') }}" alt="Default Slider" style="object-fit: cover; object-position: center;">
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Main News Slider End -->