@extends('front::layouts.master')

@section('content')

    <div class="home-banner-two">
        @if ($main_sliders->count())
            <div class="home-slides owl-carousel owl-theme d-none d-md-block">
                @foreach ($main_sliders as $slider)
                    <div class="home-item item-bg1" style="background-image: url({{ $slider->image }});">
                        <div class="d-table">
                            <div class="d-table-cell">
                                <div class="container">
                                    <div class="main-banner-content">
                                        <h1>{{ $slider->title }}</h1>
                                        <p>{{ $slider->description }}</p>
                                        @if ($slider->link)
                                            <div class="banner-btn">
                                                <a class="optional-btn" href="{{ $slider->link }}">
                                                    {{ __('messages.titles.read-more') }}
                                                </a>
                                            </div>
                                        @endif

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
        @if ($mobile_sliders->count())
            <div class="home-slides owl-carousel owl-theme d-md-none">
                @foreach ($mobile_sliders as $slider)
                    <div class="home-item item-bg1" style="background-image: url({{ $slider->image }});">
                        <div class="d-table">
                            <div class="d-table-cell">
                                <div class="container">
                                    <div class="main-banner-content">
                                        <h1>{{ $slider->title }}</h1>
                                        <p>{{ $slider->description }}</p>
                                        @if ($slider->link)
                                            <div class="banner-btn">
                                                <a class="optional-btn" href="{{ $slider->link }}">
                                                    {{ __('messages.titles.read-more') }}
                                                </a>
                                            </div>
                                        @endif

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

    </div>


    <section class="farm-area my-5">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div class="product-img">
                        <img class="w-100" src="{{ asset($product_image->image) }}" alt="{{ $product_image->title }}" title="{{ $product_image->title }}">
                    </div>
                </div>
                <div class="col-md-8">
                    <p class="detial-txt">
                        {!! $product_description->content !!}
                        @if (app()->getLocale() == 'fa')
                            <a class="btn-oxympa" href="/fa/pages/vortextube">{{ __('messages.titles.read-more-two') }}</a>
                        @else
                            <a class="btn-oxympa" href="/en/pages/OxyMPa-en">{{ __('messages.titles.read-more-two') }}</a>
                        @endif
                    </p>
                </div>
            </div>
        </div>
    </section>

    <section class="cultivation-area about-sec" style="background-image: url({{ asset($about_us->image) }})">
        <div class="black-transparent">
            <div class="container">
                <div class="cultivation-title m-0">
                    <h3>{!! option('theme_index_sliders_about_title') !!}</h3>
                    <div class="col-md-10 text-justify">
                        <div class="about-txt">{!! $about_us_content->content !!}</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="partner-area my-5">
        <div class="container d-flex flex-column align-items-center">
            <div class="d-flex justify-content-center">
                <img class="certificate-icons" src="{{ asset(config('front.asset_path') . 'img/Certifications.png') }}" alt="">
            </div>
        </div>
    </div>
    @if ($sevices_sliders->count())
        <section class="services-area py-5">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <h2 class="text-center">{{ __('messages.index.our-services') }}</h2>
                    </div>
                </div>
                <div class="row mt-4">
                    @foreach ($sevices_sliders as $sevices_slider)
                        <div class="col-md-3 my-3">
                            <div class="service-box position-relative">
                                <a href="{{ $sevices_slider->link ?? '#' }}">
                                    <div class="image-wrapper">
                                        <img src="{{ $sevices_slider->image }}" alt="{{ $sevices_slider->title }}" class="img-fluid">
                                        <div class="overlay">
                                            <p class="text-center">{{ $sevices_slider->title }}</p>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    <section class="container mt-5 mb-5">
        <div class="row">
            <div class="col-lg-12">
                <h3 class="text-center m-3">مشتریان ما</h3>
                <div id="owl-customers" class="owl-carousel owl-theme text-center">
                    @foreach ($coworker_sliders as $coworker_slider)
                        <div class="col-md-2 col-sm-3 col-6 text-center">
                            <img src="{{ $coworker_slider->image }}" alt="{{ $coworker_slider->title }}" class="img-fluid" style="max-width: 150px; width:unset">
                        </div>
                    @endforeach
                </div>

            </div>
        </div>
    </section>

    {{-- @if ($coworker_sliders->count())
        <section class="partner-area py-5">
            <div class="container">
                <h2 class="text-center mb-4">
                    <h2 class="text-center">{{ __('messages.index.customers') }}</h2>
                </h2>
                <div class="row justify-content-center align-items-center">
                    @foreach ($coworker_sliders as $coworker_slider)
                        <div class="col-md-2 col-sm-3 col-6 text-center">
                            <img src="{{ $coworker_slider->image }}" alt="{{ $coworker_slider->title }}" class="img-fluid">
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif --}}
@endsection

@push('scripts')
    <script>
        function customers() {
            jQuery('#owl-customers').owlCarousel({
                rtl: true,
                loop: true,
                center: true,
                margin: 20,
                dots: false,
                autoplay: true,
                smartSpeed: 2000,
                autoplayTimeout: 2500,
                responsiveClass: true,
                responsive: {
                    0: {
                        items: 2
                    },
                    480: {
                        items: 3
                    },
                    768: {
                        items: 4
                    },

                    1200: {
                        items: 5
                    },
                    1367: {
                        items: 5
                    }
                }
            });
        }
        customers();
    </script>
@endpush