@extends('web.layouts.container')

@section('header')
    <header>
        <div class="swiper-head">
            <div class="swiper-wrapper">
                @foreach ($sliders as $slider)
                    <div class="swiper-slide">
                        <div class="img">
                            <img src="{{asset($slider->image)}}" alt="">
                            <div class="info">
                                <h3>{{$slider->title}}</h3>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <!-- Add Arrows -->
            <div class="swiper-next"><i class="fas fa-chevron-right"></i></div>
            <div class="swiper-prev"><i class="fas fa-chevron-left"></i></div>
        </div>
        <div class="btn-scroll-down">
            <a href="#">{{__('main.scroll_down')}}</a>
        </div>
    </header>
@endsection

@section('content')
    <!-- ------------------------ about us ------------------------ -->
    <section class="about-us">
        <div class="container">
            <div class="row no-gutters">
                <div class="col-lg-4">
                    <div class="img">
                        <img src="{{$detail->image}}" alt="">
                    </div>
                </div>
                <div class="col-lg-8">
                    <div class="info">
                        <div class="color-title text-center">
                            <h2>{{__('main.about_us')}}</h2>
                        </div>
                        @php
                            //$description = trim(preg_replace('/\s\s+/', '', $detail->details));
                            $description = $detail ?? null ? explode('@@', $detail->details, 2) : [];
                        @endphp
                        <p>{{count($description) > 0 ? $description[0] : ''}}</p>
                        <p>{{count($description) > 0 ? $description[1] : ''}}</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- ------------------------- more about  ------------------------ -->
    <section class="more-about section-padding">
        <div class="container">
            <div class="row">
                @php
                    $description = $detail ?? null ? explode('@@', $detail->details_plus, 2) : [];
                @endphp
                <div class="col-lg-6">
                    <p class="pdr">{{count($description) > 0 ? $description[0] : ''}}</p>
                </div>
                <div class="col-lg-6">
                    <p class="pdl">{{count($description) > 0 ? $description[1] : ''}}</p>
                </div>
            </div>
        </div>
    </section>
    <!-- ------------------------- massion & vission  ------------------------ -->
    <div class="vission section-padding">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="items mb-5">
                        <h2 class="text-uppercase">{{__('main.vision')}}</h2>
                        <p>{{$detail ?? null ? $detail->vision : null}}</div>
                    <div class="items">
                        <h2 class="text-uppercase">{{__('main.mission')}}</h2>
                        <p>{{$detail ?? null ? $detail->mission : null}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ------------------------- values  ------------------------ -->
    <section class="values">
        <div class="container">
            <div class="content text-center">
                <div class="color-title">
                    <h2 class="text-uppercase">{{__('main.our_values')}}</h2>
                </div>
                @if ($ourValues)
                    @foreach ($ourValues as $value)
                        <p>{{$value}}</p>
                    @endforeach
                @endif

            </div>
        </div>
    </section>
    <!-- ------------------------- value-items  ------------------------ -->
    <div class="value-items section-padding text-center">
        <div class="container">
            <div class="row">
                <div class="col-lg-4">
                    <div class="items">
                        @php
                            $number = $detail ?? null ? preg_match('/[0-9]+/', $detail->percentage_first, $match) : [];
                            $number = $number ? $match[0] : 0;
                            $char = $detail ?? null ? preg_replace('/[0-9]+/', '', $detail->percentage_first) : '';
                        @endphp
                        <h2><span class="counter">{{$number}}</span><small>{{$char}}</small></h2>
                        <p>{{$detail ?? null ? $detail->percentage_text_first : null}}</p>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="items">
                        @php
                            $number = $detail ?? null ? preg_match('/[0-9]+/', $detail->percentage_second, $match) : [];
                            $number = $number ? $match[0] : 0;
                            $char = $detail ?? null ? preg_replace('/[0-9]+/', '', $detail->percentage_second) : '';
                        @endphp
                        <h2><span class="counter">{{$number}}</span><small>{{$char}}</small></h2>
                        <p>{{$detail ?? null ? $detail->percentage_text_second : null}}</p>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="items">
                        @php
                            $number = $detail ?? null ? preg_match('/[0-9]+/', $detail->percentage_third, $match) : [];
                            $number = $number ? $match[0] : 0;
                            $char = $detail ?? null ? preg_replace('/[0-9]+/', '', $detail->percentage_third) : '';
                        @endphp
                        <h2><span class="counter">{{$number}}</span><small>{{$char}}</small></h2>
                        <p>{{$detail ?? null ? $detail->percentage_text_third : null}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ------------------------- blog  ------------------------ -->
    <section class="blog news">
        <div class="news-head">
            <div class="container">
                <h2 class="text-uppercase">{{__('main.latest_news')}}</h2>
            </div>
        </div>
        <div class="container">
            <div class="blog-slide section-padding">
                <div class="row">
                    @foreach ($articles as $article)
                        <div class="col-lg-4">
                            <div class="items">
                                <div class="img">
                                    <img src="{{asset($article->image ?? $article->AImage) ?? asset('assets/web/images/news/1.jpg')}}" alt="">
                                    <span class="date">
                                        {{date('Y', strtotime($article->added_year))}}
                                        {{date('M', strtotime($article->added_year))}}
                                            </span>
                                    <a href="{{route('news.show', $article->id)}}">
                                        <span class="blog-title">
                                            <strong>{{$article->title}}</strong>
{{--                                            <strong>NT&T</strong> Awarded <strong>NESCO</strong> Project--}}
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                    <div class="col-lg-4 valign content">
                        <div class="explore w-100">
                            <a class="text-capitalize" href="{{route('news.index')}}">{{__('main.explore_more')}}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('inner_js')
    <script>
        $('.counter').countUp({
            delay: 10,
            time: 2500
        });
    </script>
@endsection