@extends('web.layouts.container')

@section('inner_header')
    <section class="inner-header text-center" style="background-image: url(http://cms.nesmasecurity.com/assets/web/images/services_1_ban.jpg);">
        <div class="container">
            <h2>{{__('main.our_services')}}</h2>
            <h6><a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), url('/'), [], true)}}">{{__('main.home')}} </a> <i class="fas fa-chevron-right"></i>{{__('main.our_services')}}</h6>
        </div>
    </section>
@endsection

@section('content')

    <!-- -------------- about-pg --------------- -->
    <section class="services-pg section-padding">
        <div class="container">
            <div class="content">
                <div class="row">
                    <div class="col-lg-4">
                        <div class="ser-nav">
                            <h4>{{__('main.all_services')}}</h4>
                            <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                                @if($services->count())
                                    @foreach($services as $service)
                                        <a class="service_tap_links" id="v-pills-home-{{$service->id}}" data-toggle="pill" href="#v-pills-{{$service->id}}" role="tab" aria-controls="v-pills-{{$service->id}}" aria-selected="true">{{$service->title}}</a>
                                    @endforeach
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-8">
                        <div class="tab-content" id="v-pills-tabContent">
                            @if($services->count())
                                @foreach($services as $service)
                                    <div class="service_tap_pane tab-pane fade" id="v-pills-{{$service->id}}" role="tabpanel" aria-labelledby="v-pills-mob-{{$service->id}}">
                                        <div class="ser-cont">
                                            <div class="ser-img">
                                                <img src="{{count($service->photos) > 1 ?  asset($service->photos[1]->image) : asset($service->image)}}" alt="">
                                            </div>
                                            <div class="info mt-4">
                                                <h4 class="main-color mb-3">{{$service->title}}</h4>
                                                <p class="text mb-3">{!! $service->description !!}</p>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection

@section('inner_js')

    <script>

        $(document).ready(function(){

            /**
             * If local storage has active service then show it
             * else show first one
             * @type {string}
             */
            let activeService = localStorage.getItem('active_service');
            if(activeService !== 'null'){
                let href = '#'+activeService;
                $('.service_tap_links[href="'+href+'"]').addClass('active');
                $(href).addClass('show active');

                localStorage.setItem('active_service', 'null');
            } else {
                $('.service_tap_links:first-of-type').addClass('active') ;
                $('.service_tap_pane:first-of-type').addClass('show active');
            }

            $('.navbar').addClass('inner-nav');

        });


    </script>
@endsection