@extends('web.layouts.container')

@section('content')
<main>
    <!-- Start Header -->
    <header class="header section py-0">
        <div class="swiper-container header_swiper">
            <div class="swiper-wrapper">
                @foreach ($websites as $item)
                <div class="swiper-slide">
                    <div class="item">
                        <div class="container">
                            <div class="text-center position-relative">
                                <h1 class="title text-white pt-4 mt-5">
                                    {{-- {{ $item->second_title}} <br> --}}
                                    {!! nl2br($item->currentDescription->description) !!}
                                </h1>
                            </div>
                        </div>
                        <h1 class="headline">{{ $item->currentDescription->title}}</h1>
                        <img src="{{ asset($item->image?: 'assets/web/images/header-1.png')}}" alt="" class="bg"/>
                    </div>
                </div>
                @endforeach
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </header>
    <!-- Start services-sec -->
    <section class="services-sec section bg-light">
        <div class="container">
            <div class="row justify-content-center">
                @for ($i = 0; $i < 5; $i++)
                <div class="col-lg-2">
                    <div class="serv_item">
                        <img src="{{ asset(app('site_settings')->numbers['image'][$i] ?? 'assets/web/images/icons/serv-1.svg')}}" alt="" class="icon"/>
                        <div class="content">
                            <h2 class=" counter color-primary mb-3">{{ trim(app('site_settings')->numbers['number'][$i] ?? '') }}</h2>
                            <h6 class="label mb-0">{{app('site_settings')->numbers['title'][app()->getLocale()][$i] ?? ''}}</h6>
                        </div>
                    </div>
                </div>
                @endfor
                <!-- <div class="col-lg-2">
                    <div class="serv_item">
                        <img src="{{ asset('assets/web/images/icons/serv-6.svg')}}" alt="" class="icon"/>
                        <div class="content">
                            <h2 class=" counter color-primary mb-3">123</h2>
                            <h6 class="label mb-0">Operating Buses</h6>
                        </div>
                    </div>
                </div> -->
            </div>
        </div>
        <img src="{{ asset('assets/web/images/route.svg')}}" alt="" class="route"/>
    </section>
    <!-- Start about-sec -->
    <section class="about-sec section py-0">
        <div class="container-fluid px-0">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <img src="{{ asset($pages[0]->image ?? 'assets/web/images/about-1.png')}}" alt="" class="sec-img"/>
                </div>
                <div class="col-lg-5">
                    <div class="text-box">
                        <h1 class="title mb-4 pb-2">
                            {!! footerLink($pages[0]->page_title, true) !!}
                        </h1>
                        <p class="p">{!! strip_tags(trim($pages[0]->description, '"'), '<b><strong>') !!}</p>
                        <a href="{{ route('pages.who_we_are') }}" class="link_butn mt-5"><span> {{ __('main.discover_more') }} <i class="fa-solid fa-angle-right"></i></span></a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Start timeline-sec -->
    @include('web.layouts.timeline')
    
    <!-- Start features-sec -->
    <section class="features-sec section mt-5">
        <div class="container">
            <h1 class="title text-center sec_head mb-5 pb-3">
                {!! __('main.services_title') !!}
            </h1>
            <div class="row">
                @php
                    $icons= ['features-1.svg', 'features-2.svg', 'features-3.svg', 'features-4.PNG'];
                    // $titles= [__('main.')]
                    // $routes= [route('pages.what_we_do'), route('pages.our_impact'), route('contact.index'), route('jobs')];
                    $routes= [route('pages.what_we_do'), route('pages.our_impact'), '#download_section', route('jobs.our_careers')];
                @endphp
                
                @for ($i = 1; $i < 5; $i++)
                <div class="col-lg-6">
                    <div class="feature_card">
                        <img src="{{ asset('assets/web/images/icons/'.$icons[$i-1])}}" alt="" class="icon"/>
                        <div class="content">
                            <h4 class="title text-uppercase mb-3">{{ $pages[$i]->page_title }}</h4>
                            <p class="p">{!! strip_tags(trim($pages[$i]->description, '"'), '<b><strong>') !!}</p>
                            <a href="{{ $routes[$i-1] }}" class="more_link d-block color-primary mt-4">
                                <span class="underline">{{ __('main.learn_more') }}</span>
                                <i class="fa-solid fa-angle-right ms-1"></i>
                            </a>
                        </div>
                    </div>
                </div>
                @endfor
            </div>
        </div>
    </section>
    <!-- Start news-sec -->
    <!--<section class="news-sec section">-->
    <!--    <div class="container">-->
    <!--        <h1 class="title text-center sec_head mb-5 pb-3">-->
    <!--            {{-- Our  <span class="color-primary line_prim">News.</span> --}}-->
    <!--            {!! footerLink(__('main.our_news')) !!}-->
    <!--        </h1>-->
    <!--        <div class="row">-->
    <!--            @foreach ($articles as $item)-->
                    
    <!--            <div class="col-lg-4">-->
    <!--                <div class="news_card">-->
    <!--                    <div class="img-box">-->
    <!--                        <img src="{{ asset($item->main_photo)}}" alt="" class="sec-img"/>-->
    <!--                        <div class="date">-->
    <!--                            <span class="day color-primary">{{ date('d', strtotime($item->news_date)) }}</span>-->
    <!--                            <p class="month mb-0">{{ date('M', strtotime($item->news_date)) }} <br> {{ date('Y', strtotime($item->news_date)) }}</p>-->
    <!--                        </div>-->
    <!--                    </div>-->
    <!--                    <div class="card-body">-->
    <!--                        <h5 class="title mb-4">{{ $item->title }}</h5>-->
    <!--                        <a href="{{ $item->url }}" class="more_link d-block color-primary mt-4">-->
    <!--                            {{ __('main.learn_more') }} <i class="fa-solid fa-angle-right ms-1"></i>-->
    <!--                        </a>-->
    <!--                    </div>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--            @endforeach-->
    <!--        </div>-->
    <!--        <a href="{{route('news')}}" class="link_butn m-auto mt-4"><span>{{ __('main.view_more') }} <i class="fa-solid fa-angle-right"></i></span></a>-->
    <!--    </div>-->
    <!--</section>-->
    <!-- Start downloading-sec -->
    @include('web.layouts.downloading')
    
    <!-- Start contact-sec -->
    @include('web.layouts.contactus')
    
</main>
@endsection

@section('inner_js')
@endsection