@extends('layouts.master')
@section('content')

<!-- ======= Slider Section ======= -->


<div id="hero">
    <div class="hero-container">
        <div id="heroCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="5000">
            <ol class="carousel-indicators" id="hero-carousel-indicators"></ol>
            <div class="carousel-inner" role="listbox">

                 <!--Slide 1 -->

                @foreach($data as $slider)
                @if($slider->english_title_image)
                @if($lang == 'english')
                <div class="carousel-item d-block carousel-item-mobile carousel-item-1 
                {{$loop->index == 0 ? 'active':''}}" 
                style="background-image: url(assets/images/slider/{{ $slider->english_image }});">
                @else
                <div class="carousel-item d-block carousel-item-mobile carousel-item-1 
                {{$loop->index == 0 ? 'active':''}}" 
                style="background-image: url(assets/images/slider/{{ $slider->urdu_image }});">
                @endif
                    <div class="row">
                        @if($lang !='english')
                        <div class="col-lg-6 col-md-8 mb-4 col-sm-12" style="margin-top:-3%"></div>
                        @endif
                        <div class="col-lg-6 col-md-8 mb-4 col-sm-12" style="margin-top:-3%">
                            <div class="carousel-container ">
                                <div class="carousel-content container animate__animated animate__slideInLeft ">
                                    @if($lang == 'english')
                                    <img src="{{ asset('assets/images/slider/'.$slider->english_title_image) }}"
                                        alt="{{$slider->english_title_image}}" class="w-75 ">
                                        @else
                                        <img src="{{ asset('assets/images/slider/'.$slider->english_title_image) }}"
                                        alt="{{$slider->english_title_image}}" class="w-75 mr-2float-right">
                                        @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div> 
                @else

                <!-- Slide 2 -->

                @if($lang == 'english')
                <div class="carousel-item d-block carousel-item-mobile carousel-item-1 carousel-fade {{$loop->index == 0 ? 'active':''}}"
                style="background-image: url(assets/images/slider/{{ $slider->english_image }});">
                @else
                <div class="carousel-item d-block carousel-item-mobile carousel-item-1 carousel-fade {{$loop->index == 0 ? 'active':''}}"
                    style="background-image: url(assets/images/slider/{{ $slider->urdu_image }});">
                @endif
                    <div class="row justify-content-center">
                        <div class="col-lg-12 col-md-8 mb-4 col-sm-12" style="margin-top:-3%">
                            <div class="carousel-container"> 
                                <div class="carousel-content container">
                                    <h3 class="animate__animated animate__fadeInDown">
                                        @if($lang == 'english')
                                        {{$slider->english_title}}
                                        @else
                                        <span  style="font-family: Nafees">
                                        {{$slider->urdu_title}}
                                        </span>
                                        @endif
                                    </h3>
                                    <p class="animate__animated animate__fadeInUp ">
                                        @if($lang == 'english')
                                        {{$slider->english_description}}
                                        @else
                                        <span  style="font-family: Nafees">
                                        {{$slider->urdu_description}}
                                         </span>
                                        @endif
                                    </p>
                                    <a href="{{ url('contact-us') }}"
                                        class="btn-get-started animate__animated animate__fadeInUp scrollto">
                                        @if($lang == 'english')
                                        Contact Us
                                        @else
                                        <span style="font-family: Nafees">
                                        رابطہ کریں
                                        </span>
                                        @endif
                                    </a>
                                    @if($slider->page_id)
                                    <a href="{{ url(\App\Models\Menu::page_slug_over_page_id($slider->page_id)) }}"
                                        class="btn-get-started animate__animated animate__fadeInUp scrollto">
                                        @if($lang == 'english')
                                        Read More
                                        @else
                                        <span style="font-family: Nafees">
                                        مزید پڑھ
                                        </span>
                                        @endif
                                    </a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div> 

                @endif
                @endforeach


            </div>
        </div>
   

        <a class="carousel-control-prev" href="#heroCarousel" role="button" data-bs-slide="prev">
            <span class="carousel-control-prev-icon " aria-hidden="true"><i class="fas fa-chevron-left"></i></span>
        </a>
        <a class="carousel-control-next" href="#heroCarousel" role="button" data-bs-slide="next">
            <span class="carousel-control-next-icon " aria-hidden="true"><i class="fas fa-chevron-right"></i></span>
        </a>

    </div>

</div>


@foreach ($page_content as $key=> $content)    
<section id="ourservices" class="mainservices servicessection">
    <div class="container">
        <div class="ourfeature-title">
        @if($lang == 'english')
            <h1>{{$key}}</h1>
        @else
            <h1 style="font-family: Nafees">
            {{$key}}
            </h1>
        @endif
        </div>
        
        <div class="row justify-content-center">
            @foreach ($content as $list)
            <div class="col-md-6 col-lg-4 d-flex align-items-stretch mt-4 mb-lg-0">
                <div class="icon-box single-services">
                    <div class="icon-one text-center">
                        <span class="{{ $list->icon }}"></span>
                    </div>
                    <h4 class="title text-white text-center" >
                        @if($lang == 'english')
                        {{$list->english_title}}
                        @else
                        <span style="font-family: Nafees">
                        {{$list->urdu_title}}
                        </span>
                        @endif
                    </h4>
                    @if($lang == 'english')
                   {!! $list->english_content !!}
                   @else
                   {!! $list->urdu_content !!}
                   @endif
                </div>
            </div>
            @endforeach
        </div>
    </div>
    
</section>
@endforeach
@endsection