@extends('web.layouts.container')

@section('inner_header')
    @if(count($sliders))
        <header>
            <div class="swiper-head">
                <div class="swiper-wrapper">
                    @foreach($sliders as $slider)
                        <div class="swiper-slide">
                            <div class="head-content has-overlay wow fadeIn valign" style="background-image: url({{asset($slider->image)}})">
                                <div class=" container-fluid ">
                                    <div class="row justify-content-center ">
                                        <div class="col-lg-12">
                                            <div class="info valign">
                                                <div class="content ">
                                                    <h2>
                                                        {{$slider->title}}
                                                    </h2>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </header>
    @endif
@endsection

@section('content')

    <!-- -------------- about --------------- -->
    <section class="about section-padding">
        <div class="container">
            <div class="section-head text-center wow fadeInUp">
                <h2>{{__('main.about') . settings('website_name') ?? __('site_name')}}</h2>
                {{--                <p>Sed ut perspiciatis unde omnis iste natus error</p>--}}
            </div>
        </div>
        <div class="content">
            <div class="container">
                <div class="row">
                    <div class="col-lg-5">
                        <div class="img">
                            <img src="{{$aboutPage ? asset($aboutPage->image) : asset('assets/web/images/about1.png')}}" alt="" class="wow zoomIn">
                            <img src="{{$whyNesma ? asset($whyNesma->image) : asset('assets/web/images/about2.png')}}" alt="" class="wow zoomIn slow">
                            <img class="shap wow zoomIn" src="{{asset('assets/web/images/ab-shape.svg')}}" alt="">
                        </div>
                    </div>
                    <div class="col-lg-7">
                        <div class="info wow fadeInRight">
                            <nav>
                                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                                    <a class="nav-item nav-link active" id="nav-overview-tab" data-toggle="tab" href="#nav-overview" role="tab" aria-controls="nav-overview" aria-selected="true">{{__('main.overview')}}</a>
                                    <a class="nav-item nav-link" id="nav-why-tab" data-toggle="tab" href="#nav-why" role="tab" aria-controls="nav-why" aria-selected="false">{{__('main.why_nesma')}}</a>
                                </div>
                            </nav>
                            <div class="tab-content" id="nav-tabContent">
                                <div class="tab-pane fade show active" id="nav-overview" role="tabpanel" aria-labelledby="nav-overview-tab">
                                    <span class="lttr">{{__('main.n')}}</span>
                                    <div class="text">{{$aboutPage ? stripText($aboutPage->description, 600) : ''}}</div>
                                    <a href="{{route('aboutUs.index')}}" class="butn color mt-3"><span>{{__('main.see_more')}} <i class="fas fa-chevron-right"></i></span></a>
                                </div>
                                <div class="tab-pane fade" id="nav-why" role="tabpanel" aria-labelledby="nav-why-tab">
                                    <span class="lttr">N</span>
                                    <div class="text">{{$whyNesma ? stripText($whyNesma->description, 600) : ''}}</div>
                                    <a href="{{route('aboutUs.index')}}" class="butn color mt-3"><span>{{__('main.see_more')}} <i class="fas fa-chevron-right"></i></span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="vision row">
                <div class="col-lg-6">
                    <a href="{{route('aboutUs.index')}}">
                        <div class="items wow zoomIn">
                            <div class="row no-gutters">
                                <div class="col-md-6">
                                    <div class="info">
                                        <h5>{{$visionPage ? $visionPage->title : 'Vision'}}</h5>
                                        <p>{{$visionPage ? stripText($visionPage->description, 120) : ''}}</p>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <img src="{{asset('assets/web/images/vis.png')}}" alt="">
                                </div>
                            </div>
                            <span class="icon">
                                <img src="{{asset('assets/web/images/icons/eye.svg')}}" alt="">
                            </span>
                        </div>
                    </a>
                </div>
                <div class="col-lg-6">
                    <a href="{{route('aboutUs.index')}}">
                        <div class="items wow zoomIn">
                            <div class="row no-gutters">
                                <div class="col-md-6">
                                    <div class="info">
                                        <h5>{{$missionPage ? $missionPage->title : 'Mission'}}</h5>
                                        <p>{{$missionPage ? stripText($missionPage->description, 120) : ''}}</p>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <img src="{{asset('assets/web/images/mis.png')}}" alt="">
                                </div>
                            </div>
                            <span class="icon">
                                <img src="{{asset('assets/web/images/icons/target.svg')}}" alt="">
                            </span>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </section>
    <!-- -------------- features --------------- -->
    <section class="features mt-5">
        <div class="container-fluid p-0">
            <div class="section-head text-center wow fadeInUp">
                <h2>{{__('main.safety_security')}}</h2>
            </div>
            <div class="content wow fadeInUp section-padding bg-main">
                <div class="swiper-features">
                    <div class="swiper-wrapper">
                        @if($services->count())
                            @foreach($services as $service)
                                <div class="swiper-slide">
                                    <a data-id="{{$service->id}}" class="services_links" href="{{route('service.index')}}">
                                        <div class="fet-items">
                                            <div class="img">
                                                <img src="{{asset($service->image)}}" alt="">
                                            </div>
                                            <div class="info text-center">
                                                <h6>{{$service->title}}</h6>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
                <div class="text-center mt-3">
                    <a href="{{route('service.index')}}" class="butn color"><span class="text-uppercase">{{__('main.view_all')}} <i class="fas fa-chevron-right"></i> </span></a>
                </div>
                <div class="shap">
                    <img src="{{asset('assets/web/images/ab-shape.svg')}}" alt="">
                </div>
            </div>
        </div>
    </section>
    <!-- -------------- techno --------------- -->
    <section class="techno section-padding">
        <div class="container">
            <div class="section-head text-center wow fadeInUp">
                <h2>{{__('main.technology')}}</h2>
                <p>{{__('main.teach_nesma_security')}}</p>
            </div>

            <div class="content">
                <div class="row no-gutters">
                    <div class="col-lg-6">
                        <div class="items wow zoomIn">
                            <div class="row no-gutters">
                                <div class="col-md-6">
                                    <div class="img">
                                        <img src="{{count($technologies) > 0 ? asset($technologies[0]['image']) : asset('assets/web/images/tech/1.png')}}" alt="">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="info valign h-100">
                                        <div class="cont text-center w-100">
                                            @php
                                                $description = '';
                                                /** @var array $technologies */
                                                if (count($technologies) > 0){
                                                    $description = strip_tags($technologies[0]['description']);
                                                    $description = preg_replace('/\s\s+/', ' ', $description);
                                                    $description = \Illuminate\Support\Str::limit($description, 80);
                                                }
                                            @endphp
                                            <h5>{{count($technologies) > 0 ? $technologies[0]['title'] : ''}}</h5>
                                            <p>{{$description}}</p>
                                            <a href="{{route('technology.show', isset($technologies[0]) ? $technologies[0]['id'] : 0)}}" class="butn color"><span class="text-uppercase">{{__('main.view_details')}}</span></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="items wow zoomIn">
                            <div class="row no-gutters">
                                <div class="col-md-6">
                                    <div class="img">
                                        <img src="{{count($technologies) > 1 ? asset($technologies[1]['image']) : asset('assets/web/images/tech/2.png')}}" alt="">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="info valign h-100">
                                        <div class="cont text-center w-100">
                                            @php
                                                $description = '';
                                                /** @var array $technologies */
                                                if (count($technologies) > 1){
                                                    $description = strip_tags($technologies[1]['description']);
                                                    $description = preg_replace('/\s\s+/', ' ', $description);
                                                    $description = \Illuminate\Support\Str::limit($description, 80);
                                                }
                                            @endphp
                                            <h5>{{count($technologies) > 1 ? $technologies[1]['title'] : ''}}</h5>
                                            <p>{{$description}}</p>
                                            <a href="{{route('technology.show', isset($technologies[1]) ? $technologies[1]['id'] : 0)}}" class="butn color"><span class="text-uppercase">{{__('main.view_details')}}</span></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="items wow zoomIn">
                            <div class="row no-gutters">
                                <div class="col-md-6">
                                    <div class="info valign h-100">
                                        <div class="cont text-center w-100">
                                            @php
                                                $description = '';
                                                /** @var array $technologies */
                                                if (count($technologies) > 2){
                                                    $description = strip_tags($technologies[2]['description']);
                                                    $description = preg_replace('/\s\s+/', ' ', $description);
                                                    $description = \Illuminate\Support\Str::limit($description, 80);
                                                }
                                            @endphp
                                            <h5>{{count($technologies) > 2 ? $technologies[1]['title'] : ''}}</h5>
                                            <p>{{$description}}</p>
                                            <a href="{{route('technology.show', isset($technologies[2]) ? $technologies[2]['id'] : 0)}}" class="butn color"><span class="text-uppercase">{{__('main.view_details')}}</span></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="img">
                                        <img src="{{count($technologies) > 2 ? asset($technologies[2]['image']) : asset('assets/web/images/tech/3.png')}}" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="items wow zoomIn">
                            <div class="row no-gutters">
                                <div class="col-md-6">
                                    <div class="info valign h-100">
                                        <div class="cont text-center w-100">
                                            @php
                                                $description = '';
                                                /** @var array $technologies */
                                                if (count($technologies) > 3){
                                                    $description = strip_tags($technologies[3]['description']);
                                                    $description = preg_replace('/\s\s+/', ' ', $description);
                                                    $description = \Illuminate\Support\Str::limit($description, 80);
                                                }
                                            @endphp
                                            <h5>{{count($technologies) > 3 ? $technologies[3]['title'] : ''}}</h5>
                                            <p>{{$description}}</p>
                                            <a href="{{route('technology.show', isset($technologies[3]) ? $technologies[3]['id'] : 0)}}" class="butn color"><span class="text-uppercase">{{__('main.view_details')}}</span></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="img">
                                        <img src="{{count($technologies) > 3 ? asset($technologies[3]['image']) : asset('assets/web/images/tech/4.png')}}" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- -------------- contact --------------- -->
    <section class="contact section-padding">
        <div class="container">
            <div class="section-head text-center wow fadeInUp">
                <h2>{{__('main.get_touch')}}</h2>
                <p>{{__('main.teach_nesma_security')}}</p>
            </div>

            <div class="content">
                <div class="row justify-content-center">
                    <div class="col-lg-9">
                        <form action="{{route('contactUs.store')}}" method="post" class="form-row wow zoomIn contact_us_form">
                            @csrf()
                            <div class="form-group col-lg-6">
                                <input name="name" class="form-control" placeholder="{{__('users.name')}}">
                            </div>
                            <div class="form-group col-lg-6">
                                <input name="email" class="form-control" placeholder="{{__('users.email')}}">
                            </div>
                            <div class="form-group col-lg-12">
                                <input name="subject" class="form-control" placeholder="{{__('users.subject')}}">
                            </div>
                            <div class="form-group col-12">
                                <textarea rows="6" name="message" class="form-control" placeholder="{{__('users.your_message')}}"></textarea>
                            </div>
                            <div class="form-group col-12 text-center">
                                <button class="butn color contact_us_button"><span>{{__('main.send')}}</span></button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <img src="{{asset('assets/web/images/map.png')}}" alt="" class="map">
    </section>

@endsection

@section('inner_js')
    <script>

        $(document).ready(function(){
            /**
             * If click each of service links store it's data-id
             */
            $('.services_links').click(function(){
                localStorage.setItem('active_service', 'v-pills-'+$(this).data('id'))
            });
        });

        var swiper = new Swiper('.swiper-features', {
            // slidesPerView: 4,
            spaceBetween: 20,
            loop: true,
            centeredSlides: true,
            navigation: false,
            breakpoints: {
                0: {
                    slidesPerView: 1,
                    spaceBetween: 5
                },
                480: {
                    slidesPerView: 2,
                    spaceBetween: 5
                },
                767: {
                    slidesPerView: 3,
                    spaceBetween: 15
                },
                1199: {
                    slidesPerView: 4,
                    spaceBetween: 20
                }
            }
        });
    </script>
@endsection