@include('frontend.sections.slider_css')

<div class="row px-4 py-4" style="margin-top: 122px;">
    <div class="row">
        <div class="col">
            <div id="carousel-container" class="owl-carousel nav-inside show-nav-hover dots-inside mb-0"
                data-plugin-options="{
                    'items': 1,
                    'loop': true,
                    'autoplay': true,
                    'autoplayTimeout': 5000,
                    'autoplayHoverPause': true,
                    'nav': true,
                    'dots': true,
                    'animateOut': 'fadeOut',
                    'responsive': {
                        '0': { 'items': 1, 'nav': false },
                        '768': { 'items': 1, 'nav': true }
                    }
                }">
                @foreach ($home_sliders as $home_slider)
                    <div class="slide-wrapper">
                        <div class="static-images">
                            <img class="bg-img" src="{{ asset('images/texture.png') }}" alt="" />
                            <img class="overlay-img" src="{{ asset('images/bg.png') }}" alt="" />
                            <img class="right-img d-none d-md-block" src="{{ asset('images/b.svg') }}" alt="" />
                            <img class="top-right-img" src="{{ asset('images/text.png') }}" alt="" />
                        </div>
                        <div class="container">
                            <div class="row align-items-center">
                                <div class="col-md-6 text-container">
                                    <p style="font-size: 30px;">{{ $home_slider->main_title }}</p>
                                    <h1 style="font-weight: bold;font-size: 45px;">
                                        {{ $home_slider->title }}
                                        <span style="color: #7dbd42;">{{ $home_slider->sub_title }}</span>
                                    </h1>
                                    <p style="font-size: 30px;">
                                        {{ $home_slider->secound_title }}
                                    </p>
                                </div>
                                <div class="col-md-6">
                                    <img class="dynamic-img"
                                        src="{{ $home_slider->getFirstMediaUrl(HomeSlider_COLLECTION) }}"
                                        alt="" />
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

<script>
    // Check the current language
    var currentLanguage = "{{ app()->getLocale() }}";

    // Check if the language is Arabic
    if (currentLanguage === "ar") {
        // Apply RTL to the carousel manually using JavaScript
        document.getElementById("carousel-container").setAttribute('data-plugin-options', JSON.stringify({
            items: 1,
            loop: true,
            autoplay: true,
            autoplayTimeout: 5000,
            autoplayHoverPause: true,
            nav: true,
            dots: true,
            animateOut: 'fadeOut',
            rtl: true,
            responsive: {
                '0': { 'items': 1, 'nav': false },
                '768': { 'items': 1, 'nav': true }
            }
        }));
    }
</script>