@extends('ar.layouts.layout')
@section('content')
        <!-- start home banner area -->
        <div id="home" class="home-banner-area home-banner-three" style="background:url({{asset(\App\Models\Banners::where('id', 1)->first()->picture)}}) no-repeat center;background-size:cover;">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-xl-6 col-lg-8 col-sm-12">
                        <div class="banner-content">
                            <span class="sub-title">{{\App\Models\Banners::where('id', 1)->first()->title_ar}}</span>
                            <h1>{{\App\Models\Banners::where('id', 1)->first()->description_ar}}</h1>
                            <div class="btn-group">
                                <a target="_blank" href="{{route('profile')}}" class="primary-btn">{{ \App\Models\Settings::where('id', 1)->first()->value_ar }}</a>
                                
                                <a href="#" class="video-btn" onclick="lightbox_open();">
                                    <i class='bx bx-right-arrow'></i>
                                </a>
                                <div id="light">
                                    <a class="boxclose" id="boxclose" onclick="lightbox_close();"></a>
                                    <video id="VisaChipCardVideo" width="900" controls>
                                        <source src="{{asset('assets/videos/company-ar-video.mp4')}}" type="video/mp4">
                                    </video>
                                </div>
                                <div id="fade" onClick="lightbox_close();"></div>  

                                <a href="{{route('about')}}" class="btn-text">{{ \App\Models\Settings::where('id', 2)->first()->value_ar }}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="promo">
                <div class="container">
                    <div class="item-single">
                        <i class='flaticon flaticon-helmet'></i>
                        <h3><a href="#"> {{ \App\Models\Settings::where('id', 3)->first()->value_ar }}</a></h3> 
                    </div>
                    <div class="item-single">
                        <i class='flaticon flaticon-worker' ></i>
                        <h3><a href="#">{{ \App\Models\Settings::where('id', 4)->first()->value_ar }}</a></h3>
                    </div>
                    <div class="item-single">
                        <i class='flaticon flaticon-skills'></i>
                        <h3><a href="#">{{ \App\Models\Settings::where('id', 5)->first()->value_ar }}</a></h3>
                    </div>
                </div>
            </div>
        </div>
        <!-- end home banner area -->

        <!-- start about section -->
        <section id="about" class="about-section-three ptb-100">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6">
                    {!! \App\Models\Settings::where('id', 12)->first()->value_ar !!}
                    </div>
                    <div class="col-lg-6">
                        <div class="about-image mb-30">
                            <img src="{{ asset(\App\Models\Images::where('id', 1)->first()->picture) }}" alt=" Image">
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- end about section -->

        <!-- start promo service section -->
        <section class="promo-service-section-three pb-70">
            <div class="container">
                <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=" Image" style="height: 364px;width: 350px;object-fit: cover;">
                                </div>
                                <div class="content">
                                    <h3><a href="{{route('services')}}">{{$service->title_ar}}</a></h3>
                                </div>
                                <div class="overlay-content">
                                    <i class='{{$service->icon}}'></i>
                                    <h3><a href="services-details.html">{{$service->title_ar}}</a></h3>
                                    <p>{{$service->description_ar}}</p>
                                    <div class="cta-btn">
                                        <a href="{{route('services')}}" class="btn-text">{{ \App\Models\Settings::where('id', 13)->first()->value_ar }}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
        <!-- end promo service section -->

        

        <!-- start service section -->
        <section class="service-section-three " style="padding: 50px 0;">

                <section id="team" class="team-section-two pb-70" >
                <div class="">
                    <div class="container">
                        <div class="top-content-two">
                            <h2>{{ \App\Models\Settings::where('id', 14)->first()->value_ar }}</h2>
                        </div>
                    </div>
                    <div class="logos">
                        <div class="logos-slide">
                            @foreach($clients as $client)
                            <img src="{{$client->picture}}" />
                            @endforeach                                                  
                        </div>
                        <div class="logos-slide">
                            @foreach($clients as $client)
                            <img src="{{$client->picture}}" />
                            @endforeach                                                  
                        </div>                        
                    </div>
            </section>

            <div class="bg-image"></div>
        </section>
        <!-- end service section -->

        <!-- start projects section -->
        <section id="projects" class="projects-section-three pb-70" style="direction:ltr;">
            <div class="container">
                <div class="section-title">
                    <span class="sub-title">{{ \App\Models\Settings::where('id', 15)->first()->value_ar }}</span>
                    <h2>{{ \App\Models\Settings::where('id', 16)->first()->value_ar }}</h2>
                </div>
                <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=" 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>
        <!-- end projects section -->
@endsection