@extends('en.layouts.layout')
@section('content')
    <!-- start page title area-->
    <div class="page-title-area ptb-100">
        <div class="container">
            <div class="page-title-content">
                <h1>{{ \App\Models\Links::where('id', 4)->first()->name }}</h1>
                <ul>
                <li class="item"><a href="{{route('home')}}">{{ \App\Models\Links::where('id', 1)->first()->name }}</a></li>
                <li class="item active"><span></span>{{ \App\Models\Links::where('id', 4)->first()->name }}</li>
                </ul>
            </div>
        </div>
        <div class="bg-image">
            <img src="{{ asset(\App\Models\Images::where('id', 7)->first()->picture) }}" alt="Demo Image">
        </div>
    </div>
    <!-- end page title area -->

    <!-- start service single area -->
    <div class="service-single-area ptb-100">
        <!-- start services section -->
        <section id="services" class="service-section-three">
            <div class="container">
                <div class="top-content">
                    <div class="title">
                        <span class="sub-title">{{ \App\Models\Settings::where('id', 24)->first()->value }}</span>
                        <h2>{{ \App\Models\Settings::where('id', 25)->first()->value }}</h2>
                    </div>
                    <p>{{ \App\Models\Settings::where('id', 26)->first()->value }}</p>
                </div>
                <div class="row justify-content-center">
                    @foreach($services as $key => $service)
                        <div class="col-lg-4 col-md-6">
                            <div class="item-single mb-30">
                                <div class="image">
                                    <img src="{{asset($service->picture)}}" alt="" style="height: 364px;width: 400px;object-fit: cover;">
                                </div>
                                <div class="content">
                                    <h3><a href="#">{{$service->title}}</a></h3>
                                    <p>{{$service->description}}</p>
                                </div>
                                <div class="spacer"></div>                                
                            </div>
                        </div>
                    @endforeach
                    
                </div>
            </div>
        </section>
        <!-- end services section -->
    </div>
    <!-- end service single area -->
@endsection