@extends('web.layouts.main')
@section('content')

  <section class="inner-header text-center">
        <div class="container">
            <h2> {{__('main.our_services')}} </h2>
            <h6>
                <a href="{{url(getCurrentLocale().'/')}}">{{__('main.home')}} </a>
                <i class="fas fa-chevron-right"></i>
                <a>{{__('main.what_we_do')}} </a> 
                <i class="fas fa-chevron-right"></i>
                {{__('main.our_services')}} 
            </h6>
        </div>
    </section>
    <!--End-inner-header-->
    <!--Contents-->
    <main>
        <!-- -------------- 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 $key=>$service)
                                        <a class="service_tap_links @if($key == 0) active @endif" 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 $key=>$service)
                                    <div class="service_tap_pane tab-pane fade @if($key == 0) show active @endif" id="v-pills-{{$service->id}}" role="tabpanel" aria-labelledby="v-pills-mob-{{$service->id}}">
                                        <div class="ser-cont">
                                            <div class="ser-img">
                                                <img src="{{  asset($service->photos[0]->image) }}" alt="">
                                            </div>
                                            <div class="info mt-4">
                                                <div class="side-header">
                                                <h3> {{$service->title}}</h3>
                                                <h4 class="mb-3">{{$service->meta_description}}</h4>
                                            </div>
                                                <p class="text mb-3">{!! $service->description !!}</p>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
        <!-- -------------- subscribe --------------- -->
        <!-- <section class="subscribe section-padding">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-8">
                        <div class="content row">
                            <div class="col-lg-5">
                                <h2>Subscribe Us</h2>
                            </div>
                            <div class="col-lg-7">
                                <form>
                                    <div class="form-group">
                                        <input type="text" class="form-control" placeholder="Enter your email address">
                                        <button class="butn color"><span>Go</span></button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section> -->
    </main>
  

@stop