@extends('web.layouts.container')

@section('content')
    <div class="inner_header" style="background-image: url({{asset($rootDetails->header_image ?? 'assets/web/images/do_inner.jpg')}});">
        <div class="container">
            <div class="info text-center">
                <h3>{{$rootDetails->header_title ?? ''}}</h3>
                <ul>
                    <li>
                        <a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), route('home'), [], true)}}">home</a>
                    </li>
                    <li>
                        <a href="#">{{$rootDetails->header_title ?? ''}}</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--Contents-->
    <main>
        <section class="why_choose_roots section_padding bg_gray">
            <div class="container">
                <div class="section_title mb-5">
                    <h5 class="subtitle   color-primary mb-2">Why Roots</h5>
                    <h2 class="titlemb-4"><b>{{$rootDetails->title ?? ''}}</b></h2>
                </div>
                @if(count($roots))
                    <div class="content">
                        <span class="x_line"></span>
                        @foreach($roots as $root)
                            @if($loop->odd)
                                <div class="items">
                                    <div class="row align-items-center justify-content-between">
                                        <div class="col-lg-6">
                                            <div class="img">
                                                <img src="{{asset($root->image)}}" alt="">
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="info border-0">
                                                <h5>{{stripText($root->description)}}</h5>
                                            </div>
                                        </div>
                                    </div>
                                    <span class="dott wow"></span>
                                </div>
                            @endif
                            @if($loop->even)
                                <div class="items">
                                    <div class="row align-items-center justify-content-between">
                                        <div class="col-lg-6">
                                            <div class="info">
                                                <h5>{{stripText($root->description)}}</h5>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="img">
                                                <img src="{{asset($root->image)}}" alt="">
                                            </div>
                                        </div>
                                    </div>
                                    <span class="dott wow"></span>
                                </div>
                            @endif
                        @endforeach

                    </div>
                @endif

                <div class="text-center section_padding btm_head bg-white">
                    <h1>WE GET YOU THE RESULTS !!</h1>
                </div>
            </div>
        </section>
    </main>
@endsection

@section('inner_js')

    <script>
        $('.top_nav').addClass('position-relative inner_top_nav btn_filter py-3');
    </script>

@endsection