@extends('web.layouts.container')

@section('header')
    <div class="container">
        <div class="inner">
            <div class="top">
                <a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), route('home'), [], true)}}">{{__('main.home')}}</a>
                <span>{{$servicePage->title}}</span>
            </div>
{{--            <h2>{{$servicePage->title}}</h2>--}}
{{--            <p>{{stripText($servicePage->description)}}</p>--}}
        </div>
    </div>
@endsection

@section('content')
    <section class="services_det bg-gray section-padding">
        <div class="content">
            <div class="container">
                <div class="row ">
                    <div class="col-md-3">
                        <div class="r_side">
                            <ul class="nav nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                                @if(count($services))
                                    @foreach($services as $service)
                                        <li>
                                            <a class="{{$hash == stripText(strtolower($service->hash_name), 10, true) ? 'active' : ''}}" id="v-pills-tab-{{$loop->iteration}}-tab" data-toggle="pill" href="#v-pills-tab_{{$loop->iteration}}" role="tab" aria-controls="v-pills-tab1" aria-selected="true">
                                                <img src="{{asset($service->images[0])}}" alt=""> {{$service->name}}
                                            </a>
                                        </li>
                                    @endforeach
                                @endif

                            </ul>
                        </div>
                    </div>
                    <div class="col-md-9">
                        <div class="tab-content" id="v-pills-tabContent">
                            @if(count($services))
                                @foreach($services as $service)
                                    <div class="tab-pane fade {{$hash == stripText(strtolower($service->hash_name), 10, true) ? 'show active' : ''}}" id="v-pills-tab_{{$loop->iteration}}" role="tabpanel" aria-labelledby="v-pills-tab1-tab">
                                        <div class="tab-wrapper">
                                            <img src="{{asset($service->images[1])}}" class="service-img">
                                            <div class="card-body">
{{--                                                <span>متابعة القضايا</span>--}}
                                                <h5>{{$service->name}}</h5>
                                                <p>{!! $service->description !!}</p>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="methodology-sec bg-white">
        <div class="container">
            <div class="heading-sec wow zoomIn" data-wow-duration="2s">
                <h4>{{__('main.work_way')}}</h4>
            </div>
            <div class="inner">
                <div class="row">
                    @if(count($workWays))
                        @foreach($workWays as $workWay)
                            <div class="col-lg-3 col-md-6">
                                <div class="item
                                    @if($loop->iteration == 1) first @endif
                                @if($loop->iteration == 2) second @endif
                                @if($loop->iteration == 3) third @endif
                                @if($loop->iteration == 4) last @endif
                                    wow flipInY" data-wow-duration="2s">
                                    <div class="image-content">
                                        <img src="{{asset($workWay->image)}}" class="main-img">
                                        <span class="number">{{$loop->iteration}}</span>
                                    </div>
                                    <div class="text text-center">
                                        <h5>{{$workWay->title}}</h5>
                                        <p>{!! $workWay->description !!}</p>
                                    </div>
                                    <img src="{{asset('assets/web/images/methodology-arrow.png')}}" class="arrow wow clipping" data-wow-duration=".5s" data-wow-delay=".5s">
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </section>
@endsection

@section('inner_js')
    <script>
        let url = "{{asset($servicePage->image)}}";
        $('header').addClass('inner_header inner_header_lg').attr('style', 'background: url('+url+')');
        $('.navs-container').addClass('inner_nav');
    </script>
@endsection