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

@push('schema')
@php $schemas = [
    \App\Services\SchemaService::website(),
    \App\Services\SchemaService::breadcrumb([
        ['name' => 'Home', 'url' => '/'],
    ]),
]; @endphp
@include('schema')
@endpush

@section('content')
    <!-- Main Slider Section Three -->
    <section class="main-slider-three">
        <div class="main-slider-carousel-two owl-carousel owl-theme">
            @foreach ($sliders as $slider)
                <div class="slide" style="background-image:url({{ asset($slider->photo) }})">
                    <div class="auto-container">
                        <div class="content-column">
                            <div class="inner-column">
                                {{-- <h2>{{ $slide->title }}</h2>
                                <div class="text">{{ $slide->subtitle }}</div>
                                @if (!empty($slide->button_text) && !empty($slide->button_link))
                                    <div class="btn-box">
                                        <a href="{{ $slide->button_link }}" class="theme-btn btn-style-one"><span
                                                class="txt">{{ $slide->button_text }}</span></a>
                                    </div>
                                @endif --}}
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </section>
    <!-- End Main Slider Section -->

    <!-- Company Section -->
    <section class="company-section">
        <div class="circle-layer"></div>
        <div class="big-letter">
            <img src="{{ asset('themes/web/assets/images/resource/letter.png') }}" width="510" height="600" loading="lazy" style="aspect-ratio: 510/600;" alt="" />
        </div>
        <div class="auto-container">
            <div class="row clearfix">

                <!-- Content Column -->
                <div class="content-column col-lg-12 col-md-12 col-sm-12">
                    <div class="inner-column">
                        <div class="title">COMPANY OVERVIEW</div>
                        <h1>About El Didi Group</h1>
                        <div class="text">
                            {!! nl2br(e($option['app_overview'] ?? '')) !!}
                        </div>

                        <!-- Button Box -->
                        {{-- <div class="button-box"> --}}
                        <div>
                            <a class="btn-style-three theme-btn" href="{{ route('web.about') }}">
                                <span class="txt">
                                    Learn More
                                </span>
                            </a>
                            
                            @if (!empty ($option['driveLink']))
                                <a class="btn-style-two theme-btn" href="{{ $option['driveLink']}}" download>
                                    <span class="txt">Download Company Profile</span>
                                </a>
                            @endif
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- End Services Section Two -->
    <!-- Companies Section -->
	<section class="clients-section-two">
	    <div class="auto-container">
			<div class="sec-title centered">
				<h2>OUR COMPANIES</h2>
			</div>
			<div class="inner-container">
				<div class="sponsors-outer">
                    @if(count($companies) <= 5)
                        <!-- Static display for 5 or fewer companies -->
                        <ul class="sponsors-static owl-carousel" style="display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 30px; list-style: none; padding: 0;">
                            @foreach ($companies as $company)
                                <li class="slide-item">
                                    <figure class="image-box">
                                        <a href="{{ route('web.companies.show', $company->id) }}">
                                            <img src="{{ asset($company->photo) }}" alt="{{ $company->name ?? 'Company' }}" width="1200" height="600" loading="lazy" style="aspect-ratio: 1200/600;">
                                        </a>
                                    </figure>
                                </li>
                            @endforeach
                        </ul>
                    @else
                        <!-- Sponsors Carousel -->
                        <ul class="sponsors-carousel owl-carousel owl-theme">
                            @foreach ($companies as $company)
                                <li class="slide-item">
                                    <figure class="image-box"><a href="{{ route('web.companies.show', $company->id) }}"><img
                                                src="{{ asset($company->photo) }}" alt="Company" width="510" height="600" loading="lazy" style="aspect-ratio: 510/600;"></a>
                                    </figure>
                                </li>
                            @endforeach
                        </ul>
                    @endif
				</div>
			</div>
		</div>
	</section>
    <!-- End Companies Section -->

    <!-- Start Services Section -->
    <section class="projects-section-three" style="background-image:url(themes/web/assets/images/background/pattern-2.png)">
		<div class="auto-container">
			<!-- Sec Title -->
			<div class="sec-title light centered">
				<h2>Our Services</h2>
			</div>
			<div class="project-carousel-two owl-carousel owl-theme">
				
				<!-- Gallery Block Three -->
                @foreach ($services as $service)
                    <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="{{ $service->title }}" 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>
                @endforeach
				
			</div>
		</div>
	</section>
    <!-- End Services Section -->

    <!-- Shop Section -->
	<section class="shop-section">
		<div class="auto-container">
			
			<!-- Sec Title -->
			<div class="sec-title centered">
				<h2>FEATURED PRODUCTS</h2>
			</div>
			
			<div class="row clearfix">
			
                @foreach ($products as $product)
                @php
                    $mainPhoto = $product->main_photo;

                    $imageSrc = \Illuminate\Support\Str::startsWith($mainPhoto, ['http://', 'https://'])
                        ? $mainPhoto
                        : asset('system/storage/app/public/product/' . $mainPhoto);
                @endphp
                    <!-- Shop Block -->
                    <div class="shop-block col-lg-3 col-md-6 col-sm-12">
                        <div class="inner-box wow fadeInLeft" data-wow-delay="0ms" data-wow-duration="1500ms">
                            <div class="image">
                                <a href="{{ route('web.products.show', [$product->category->slug, $product->slug, $product->id]) }}"><img src="{{ $imageSrc }}" alt="{{ $product->title }}" width="510" height="600" loading="lazy" style="aspect-ratio: 510/600;" /></a>
                            </div>
                            <div class="lower-content">
                                <h5><a href="{{ route('web.products.show', [$product->category->slug, $product->slug, $product->id]) }}">{{$product->title}}</a></h5>
                            </div>
                        </div>
                    </div>
                @endforeach
				
			</div>
			
			<!-- Button Box -->
			<div class="button-box text-center">
				<a class="btn-style-two theme-btn" href="{{ route('web.categories') }}"><span class="txt">More Products</span></a>
			</div>
			
		</div>
	</section>
	<!-- End Shop Section -->

	<!-- Projects Section Two -->
    <section class="projects-section-two" id="projects">
        <div class="auto-container">
            <!-- Sec Title -->
            <div class="sec-title centered">
                <h2>reference list</h2>
            </div>
            
            <!-- MixitUp Gallery -->
            <div class="mixitup-gallery">
                
                <!-- Filter -->
                {{-- <div class="filters clearfix">
                    <ul class="filter-tabs filter-btns text-center clearfix">
                        <li class="active filter" data-role="button" data-filter="all">All</li>
                        <li class="filter" data-role="button" data-filter=".underconstruction">Under construction</li>
                        <li class="filter" data-role="button" data-filter=".finished">Finished</li>
                    </ul>
                </div> --}}
                
                <div class="filter-list row clearfix">
                    @foreach ($projects as $project)
                        <!-- Gallery Block Two -->
                        {{-- <div class="gallery-block-two mix all {{ $project->finished == 1 ? 'finished' : 'underconstruction' }} col-lg-4 col-md-6 col-sm-12"> --}}
                        <div class="gallery-block-two mix all finished col-lg-4 col-md-6 col-sm-12">
                            <div class="inner-box">
                                <div class="image">
                                    <a href="{{ route('web.projects.show', ['id' => $project->id]) }}">
                                        <img src="{{ asset('system/storage/app/public/project/'. $project->main_photo) }}" alt="{{ $project->title }}" width="510" height="600" loading="lazy" style="aspect-ratio: 510/600;" />
                                    </a>
                                </div>
                                <div class="lower-content">
                                    <h5><a href="{{ route('web.projects.show', ['id' => $project->id]) }}">{{ $project->title }}</a></h5>
                                    <div class="designation">Client: <span>{{ $project->client }}</span></div>
                                    <div class="designation">Location: <span>{{ $project->location }}</span></div>
                                    {{-- <div class="designation">Year: <span>{{ $project->created_at->format('Y') }}</span></div> --}}
                                    @if (!empty($project->description))
                                        <div class="sub-title">{{ \Illuminate\Support\Str::limit(strip_tags($project->description), 50, '...') }}</div>
                                    @endif
                                    <div class="designation">
                                        <a href="{{ route('web.projects.show', ['id' => $project->id]) }}">learn more</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                
                <!-- Button Box -->
                <div class="button-box text-center">
                    <a class="btn-style-two theme-btn" href="{{ route('web.projects') }}">
                        <span class="txt">View All Projects</span>
                    </a>
                </div>
                
            </div>
            
        </div>
    </section>
    <!-- End Projects Section Two -->

	<!-- End Projects Section Two -->
	<section class="news-section">
			<div class="circle-layer"></div>
			<div class="auto-container">
				<!-- Sec Title -->
				<div class="sec-title centered">
					<h2> News Article</h2>
				</div>

				<div class="row clearfix align-items-stretch">

					<!-- News Block -->
                    @foreach ($news as $newsItem)
                        <div class="news-block-two col-lg-4 col-md-6 col-sm-12 d-flex">
                            <div class="inner-box h-100 d-flex flex-column wow fadeInLeft animated" data-wow-delay="300ms" data-wow-duration="1500ms" style="visibility: visible; animation-duration: 1500ms; animation-delay: 300ms; animation-name: fadeInLeft;">
                                <div class="image">
                                    <a href="{{ route('web.news.show', $newsItem->id) }}"><img src="{{ asset($newsItem->photo)}}" alt="{{ $newsItem->title }}" width="510" height="600" loading="lazy" style="aspect-ratio: 510/600;"></a>
                                    <div class="post-date">{{ $newsItem->created_at->format('d M Y') }}</div>
                                </div>
                                <div class="lower-content flex-grow-1">
                                    <h4><a href="{{ route('web.news.show', $newsItem->id) }}">{{$newsItem->title}}</a>
                                    </h4>
                                    <p class="sub-title">{{$newsItem->short_description}}</p>
                                </div>
                            </div>
                        </div>
                    @endforeach
				</div>

				<!-- Button Box -->
				<div class="button-box text-center">
					<a class="btn-style-two theme-btn" href="{{ route('web.news') }}"><span class="txt">View All Posts</span></a>
				</div>

			</div>
	</section>


    <!-- Testimonial Section Two -->
    {{-- <section class="testimonial-section-two" style="background-image:url(themes/web/assets/images/background/15.jpg)">
        <div class="auto-container">
            <!-- Sec Title -->
            <div class="sec-title light centered">
                <span class="icon flaticon-telephone"></span>
                <h2>Our Customer Say <br> <span>testimonials</span></h2>
            </div>
            <div class="inner-container">
                <div class="single-item-carousel owl-carousel owl-theme">


                    @for ($counter = 1; $counter <= 5; $counter++)
                        @php
                            $img = $option['customersImg' . $counter] ?? null;
                            $text = $option['customersText' . $counter] ?? null;
                        @endphp
                        @if ($img || $text)
                            <!-- Testimonial Block Two -->
                            <div class="testimonial-block-two">
                                <div class="inner-box">
                                    <div class="author-image">
                                        <img src="{{ $img ? asset($img) : asset('themes/web/assets/images/resource/author-1.jpg') }}"
                                            alt="" />
                                    </div>
                                    <div class="text">{{ $text }}</div>
                                    <h5>El Didi Group</h5>
                                    <div class="designation">- Customer</div>
                                </div>
                            </div>
                        @endif
                    @endfor
                </div>
            </div>
        </div>
    </section> --}}
    <!-- End Testimonial Section Two -->
    <!-- Counter Section Two -->
    {{-- <section class="counter-section-two">
        <div class="auto-container">
            <div class="inner-container">

                <!-- Fact Counter / Style Two -->
                <div class="fact-counter style-two">
                    <div class="clearfix">

                        @if (!empty($option['awards']))
                            <!-- Column 1 -->
                            <div class="column counter-column col-lg-3 col-md-6 col-sm-12">
                                <div class="inner wow fadeInLeft" data-wow-delay="300ms" data-wow-duration="1500ms">
                                    <div class="content">
                                        <div class="icon flaticon-trophy"></div>
                                        <div class="count-outer count-box ">
                                            <span class="count-text" data-speed="5000"
                                                data-stop="{{ $option['awards'] }}">0</span>+
                                        </div>
                                        <h4 class="counter-title">Awards</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="column counter-column col-lg-3 col-md-6 col-sm-12" style="display: none;">
                                <div class="inner wow fadeInLeft" data-wow-delay="300ms" data-wow-duration="1500ms">
                                    <div class="content">
                                        <div class="icon flaticon-trophy"></div>
                                        <div class="count-outer count-box ">
                                            <span class="count-text" data-speed="5000"
                                                data-stop="{{ $option['awards'] }}">0</span>+
                                        </div>
                                        <h4 class="counter-title">Awards</h4>
                                    </div>
                                </div>
                            </div>
                        @endif

                        @if (!empty($option['happyClients']))
                            <!-- Column 2 -->
                            <div class="column counter-column col-lg-3 col-md-6 col-sm-12">
                                <div class="inner wow fadeInLeft" data-wow-delay="600ms" data-wow-duration="1500ms">
                                    <div class="content">
                                        <div class="icon flaticon-smile"></div>
                                        <div class="count-outer count-box">
                                            <span class="count-text" data-speed="3500"
                                                data-stop="{{ $option['happyClients'] }}">0</span>k
                                        </div>
                                        <h4 class="counter-title">Happy Clients</h4>
                                    </div>
                                </div>
                            </div>
                        @endif

                        @if (!empty($option['projects']))
                            <!-- Column 3 -->
                            <div class="column counter-column col-lg-3 col-md-6 col-sm-12">
                                <div class="inner wow fadeInLeft" data-wow-delay="900ms" data-wow-duration="1500ms">
                                    <div class="content">
                                        <div class="icon flaticon-helmet-1"></div>
                                        <div class="count-outer count-box">
                                            <span class="count-text" data-speed="5000"
                                                data-stop="{{ $option['projects'] }}">0</span>+
                                        </div>
                                        <h4 class="counter-title">Projects</h4>
                                    </div>
                                </div>
                            </div>
                        @endif

                        @if (!empty($option['upTime']))
                            <!-- Column 4 -->
                            <div class="column counter-column col-lg-3 col-md-6 col-sm-12">
                                <div class="inner wow fadeInLeft" data-wow-delay="1200ms" data-wow-duration="1500ms">
                                    <div class="content">
                                        <div class="icon flaticon-clock"></div>
                                        <div class="count-outer count-box">
                                            <span class="count-text" data-speed="4000"
                                                data-stop="{{ $option['upTime'] }}">0</span>%
                                        </div>
                                        <h4 class="counter-title">Up Time</h4>
                                    </div>
                                </div>
                            </div>
                        @endif

                    </div>
                </div>
            </div>
        </div>
    </section> --}}
    <!-- End Counter Section Two -->

    <!-- Clients Section Two -->
    <section class="clients-section-two">
        <div class="auto-container">
            <div class="sec-title centered">
                <h2>We Have Best <br><span>Corporate Partners</span></h2>
            </div>
            <div class="inner-container">
                <div class="sponsors-outer">
                    <!-- Sponsors Carousel -->
                    <ul class="sponsors-carousel owl-carousel owl-theme">
                        @foreach ($partners as $partner)
                            <li class="slide-item">
                                <figure class="image-box"><a href="{{ route('web.partners.show', $partner->id) }}"><img
                                            src="{{ asset($partner->photo) }}" alt="Partner" width="1200" height="600" loading="lazy" style="aspect-ratio: 1200/600;"></a>
                                </figure>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
            <i class="fa fa-bar-chart" aria-hidden="true"> Visitors Counter : <span
                    class="post-views-count">{{ $views->count }}</span></i>

        </div>
    </section>
    <!-- End Clients Section Two -->
@endsection