@extends('web_theme::layout.main')

@section('title', 'Our Services | El DiDi Group')
@section('meta_description', 'Discover the range of services offered by El DiDi Group, covering multiple industries with expertise and innovation.')

@section('content')
    <!-- Page Title -->
    <section class="page-title">
        <div class="content" style="background-image: url('{{ asset($option['serviceHeaderImg']) }}')">
        </div>
    </section>
    <!-- End Page Title -->

    <!-- News Section -->
    <section class="news-section">
        <div class="auto-container">
            <h1 class="page-title" style="text-align: center">Our Services</h1>
            <br><br>
            <div class="row clearfix">
                @foreach ($services as $service)
                    <div class="news-block-two col-lg-6 col-md-6 col-sm-12">
                        <div class="gallery-block-three">
					        <div class="inner-box">
                                <div class="image">
                                    <a href="{{ route('web.services.show', [$service->slug, $service->id]) }}"><img
                                            src="{{ asset($service->photo) }}" alt="Photo" width="510" height="600" loading="lazy" style="aspect-ratio: 510/600;" /></a>
                                    <div class="overlay-content centered">
                                        <h4><a href="{{ route('web.services.show', [$service->slug, $service->id]) }}">{{ $service->title }}</a></h4>
                                        <div class="designation">{{ $service->subtitle }}</div>
                                        <div class="lower-text">
                                            <a href="{{ route('web.services.show', [$service->slug, $service->id]) }}">Learn More </a>
                                        </div>	
                                    </div>	
							    </div>
                            </div>
                        </div>
                    </div>
                @endforeach

            </div>
            <i class="fa fa-bar-chart" aria-hidden="true"> Visitors Counter : <span
                    class="post-views-count">{{ $views->count }}</span></i>


        </div>
    </section>
    <!-- End News Section -->
    <!-- Video Section -->
    <section class="video-section" style="background-image:url(themes/web/assets/images/background/5.jpg)">
        <div class="auto-container">
            <div class="content">
                {{-- <h2>{{ $option['youtubeText'] }}</h2>
                <div class="text">Arab Contractors</div>
                <a href="{{ $option['youtubeLink'] ?? '#' }}" class="lightbox-image video-box"><span
                        class="flaticon-play-button"><i class="ripple"></i></span></a> --}}
            </div>
        </div>
    </section>
    <!-- End Video Section -->
@endsection