@extends('web_site.layouts.master')

@section('content')

    <section class="breadcumb-wrapper" data-bg-src="{{ asset('assets_web/img/breadcurmb1.webp') }}">
        <div class="container">
            <h1 class="breadcumb-title">{{ trans('site.nav.services') }}</h1>
        </div>
    </section>

    <section class="vs-service-wrapper space-top space-md-bottom">
        <div class="container">
            @if ($services->isEmpty())
                <p class="text-center">{{ trans('site.common.no_records') }}</p>
            @else
                <div class="row">
                    @foreach ($services as $service)
                        <div class="col-md-4">
                            <div class="service-thumb wow fadeInUp" data-wow-delay="0.3s">
                                <div class="sr-img">
                                    <a href="{{ route('service-details', $service) }}">
                                        <img src="{{ $service->image_path }}" loading="lazy" alt="{{ $service->title }}" class="w-100">
                                    </a>
                                </div>
                                <div class="sr-body">
                                    <h3 class="h4 sr-title"><a class="text-reset" href="{{ route('service-details', $service) }}">{{ $service->title }}</a></h3>
                                    <div class="sr-content">
                                        @if ($service->description)
                                            <p class="sr-text">{{ \Illuminate\Support\Str::limit($service->description, 130) }}</p>
                                        @endif
                                        <a href="{{ route('service-details', $service) }}" class="link-btn">{{ trans('site.blog.read_more') }}<i class="fal fa-long-arrow-{{ app()->getLocale() === 'ar' ? 'left' : 'right' }}"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
    </section>

@endsection