@extends('web.layouts.container')

@section('content')
    <!-- Start pg-header -->
    <div class="pg-header">
        <div class="container">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="#"><img src="{{asset('assets/web/images/icon-2.png')}}" alt="" class="icon"/></a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{__('services.head')}}</li>
                </ol>
            </nav>
            <h2 class="title text-center mb-0">{{__('services.head')}}</h2>
        </div>
    </div>
    <!-- Start about-pg -->
    @if(count($services))
        <section class="about-pg about-pg2 section">
            <div class="container">
                @foreach($services as $service)
                                        @if($loop->odd)
                        <div class="row">
                            <div class="col-md-6">
                                <div class="text-box sec-heading center-vr">
                                    <h2 class="title mb-3 wow puff-in-center"> {{$serviceTitle[0] ?? ''}} <span class="primary"> {{$serviceTitle[1] ?? ''}}  </span>   </h2>
                                    @if(count($service->descriptions))
                                        <ul class="list-custom mt-4 wow fadeInUp">
                                            @foreach($service->descriptions as $serviceDescription)
                                                <li class="li">
                                            <span class="icon-wrapper" style="background-color: #eae8f8;">
                                                <img src="{{asset($serviceDescription['icon'])}}" alt="" class="icon"/>
                                            </span>
                                                    {{$serviceDescription['desc_'.getCurrentLocale()]}}
                                                </li>
                                            @endforeach
                                        </ul>
                                    @endif

                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="animate-img-box center-vr">
                                    <img src="{{asset($service->image)}}" alt="" class="sec-img"/>
                                </div>
                            </div>
                        </div>
                    @endif

                    @if($loop->even )
                        <div class="last-item pt-5 mt-5">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="animate-img-box center-vr">
                                        <img src="{{asset($service->image)}}" alt="" class="sec-img"/>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="text-box2 sec-heading">
                                        <h2 class="title mb-3 wow puff-in-center"> {{$serviceTitle[0]}} <span class="primary"> {{$serviceTitle[1]}}  </span>   </h2>
                                                                                @if(is_array($serviceDescriptions) && count($serviceDescriptions))
                                            <ul class="list-custom mt-4 wow fadeInUp">
                                                @foreach($serviceDescriptions as $serviceDescription)
                                                    <li class="li">
                                            <span class="icon-wrapper" style="background-color: #eae8f8;">
                                                <img src="{{asset($serviceDescription['icon'])}}" alt="" class="icon"/>
                                            </span>
                                                        {{$serviceDescription['desc_'.getCurrentLocale()]}}
                                                    </li>
                                                @endforeach
                                            </ul>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                @endforeach
            </div>
        </section>
    @endif
@endsection

@section('inner_js')
    <script>
        $('.navbar').toggleClass('inner-nav home-nav');
    </script>
@endsection