@extends('ar.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', 8)->first()->name_ar }}</h1>
                    <ul>
                        <li class="item"><a href="{{route('home')}}">{{ \App\Models\Links::where('id', 1)->first()->name_ar }}</a></li>
                        <li class="item active"><span></span>{{ \App\Models\Links::where('id', 8)->first()->name_ar }}</li>
                    </ul>
                </div>
			</div>
			<div class="bg-image">
				<img src="{{ asset(\App\Models\Images::where('id', 8)->first()->picture) }}" alt="Demo Image">
			</div>
        </div>
        <!-- end page title area -->

       <!-- start blog section -->
       <section id="blog" class="blog-section ptb-100">
            <div class="container">
                <div class="top-content">
                    <div class="title">
                        <span class="sub-title">{{ \App\Models\Settings::where('id', 27)->first()->value_ar }}</span>
                        <h2>{{ \App\Models\Settings::where('id', 28)->first()->value_ar }}</h2>
                    </div>
                    <p>{{ \App\Models\Settings::where('id', 29)->first()->value_ar }}</p>
                </div>
              
            </div>

            <section id="projects" class="projects-section-three pb-70" style="direction:ltr">
                <div class="container">
                    <div class="row">
                        <div class="col-md-8 m-auto">
                            <div class="filter-group">
                                <!-- Control List -->
                                <ul id="control" class="filter-control">
                                    <li class="active" data-filter="all">{{ \App\Models\Settings::where('id', 17)->first()->value_ar }}</li>
                                    @foreach($projects as $pid => $project)
                                    <li data-filter="{{$pid}}">{{$project}}</li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="row filter-container">
                        @foreach($project_details as $key => $pd)
                        <div class="filtr-item @if($key==0) col-lg-8 @else col-lg-4 @endif col-md-6" data-category="{{$pd->project_id}}">
                            <div class="item-single mb-30">
                                <div class="image">
                                    <img src="{{asset($pd->picture)}}" alt="Demo Image" style="width: 100%; @if($key==0)height: 600px; @else height: 280px; @endif object-fit: cover;">
                                </div>
                                <div class="content">
                                    <h3><a href="projects-details.html">{{$pd->title_ar}}</a></h3>
                                    <span>{{$projects[$pd->project_id]}}</span>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>                    
                </div>
            </section>
        </section>        
@endsection