@extends('frontend.main')
@section('content')
    <section class="page-title-light breadcrumb_section parallax_bg overlay_bg_50" style="background: url({{asset('img/img16.jpg')}})">
        <div class="page-title-light2">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-sm-6">
                        <div class="heading-title">
                            <h1>{{$service->name}}</h1>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <nav aria-label="breadcrumb">
                          <ol class="breadcrumb justify-content-sm-end">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item active" aria-current="page">{{$service->name}}</li>
                          </ol>
                        </nav>
                    </div>
                </div>
            </div>  
        </div>
    </section>
    <!--Hosting Section-->
    <section class="hosting-section">
        <div class="auto-container">
            <div class="sec-title centered">
                <h2>{{$service->name}}</h2>
            </div>
            <div class="row clearfix">

                <!--Image Column-->
                <div class="image-column col-lg-6 col-md-12 col-sm-12">
                    <div class="image wow slideInLeft" data-wow-delay="0ms" data-wow-duration="1500ms">
                        <img src="{{asset('frontend/images/resource/bit-bit.png')}}" alt="" />
                    </div>
                </div>

                <!--Content Column-->
                <div class="content-column col-lg-6 col-md-12 col-sm-12">
                    <div class="inner-column">
                        {!! $service->description !!}
                    </div>
                </div>

            </div>
        </div>
    </section>
    <!--End Hosting Section-->
    <!--Info Listing Section-->
    <section class="info-listing-section">
        <div class="auto-container">
            <div class="sec-title centered">
                <h2 style="color: white;">AWT {{$service->name}}</h2>
            </div>
            <div class="cloud-one"></div>
            <div class="cloud-two"></div>
            <div class="row clearfix">

                <!--Hosting Info Block-->
                <div class="hosting-info-block col-lg-12 col-md-12 col-sm-12">
                    <div class="inner-block">
                        {!! $service->short_description !!}
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--End Info Listing Section-->

    <!--Pricing Section-->
    <section class="pricing-section">
        <div class="auto-container">
            <div class="sec-title centered">
                <h2>{{$service->name}} Plans</h2>
                <div class="text"> Protecting 500 million users worldwide.</div>
            </div>
            <div class="outer-container pricing-tabs tabs-box">
                <div class="clearfix">
                    <!--Title Column-->
                    <div class="title-column">
                        <div class="inner-column">

                            <!--Tab Btns-->
                            <ul class="tab-buttons clearfix">
                                {{--<li data-tab="#prod-monthly" class="tab-btn active-btn">Monthly Plans</li>--}}
                                <li data-tab="#prod-yearly" class="tab-btn active-btn">Annual Plans</li>
                            </ul>
                        </div>
                    </div>
                    <!--Price Column-->
                    <div class="price-column">
                        <div class="inner-column">
                            <!--Tabs Container-->
                            <div class="tabs-content">
                                <!--Tab-->
                                <div class="tab active-tab" id="prod-yearly">
                                    <div class="content">
                                        <div class="row clearfix">
                                        @foreach($bitdefender_package as $bit_package)
                                            <!--Price Block-->
                                            <div class="price-block col-lg-4 col-md-12 col-sm-12">
                                                <div class="inner-box wow fadeInUp" data-wow-delay="0ms"
                                                     data-wow-duration="1500ms">
                                                    <div class="title">{{$bit_package->name}}</div>
                                                    <div class="upper-box">
                                                        <div class="icon-box">
                                                                <span class="icon"><img
                                                                            src="{{asset('frontend/images/icons/icon-1.png')}}"
                                                                            alt=""/></span>
                                                        </div>
                                                        <div class="price">{{ get_local_currency_prefix() }} {{ get_local_currency($bit_package->price) }}
                                                            <sub>/yr</sub></div>
                                                    </div>
                                                    <div class="lower-box">
                                                        <ul>
                                                            <li>No. of users: {{$bit_package->no_of_users}}</li>
                                                        </ul>
                                                        <a href="{{route('set.bitdefenderSession', [$service->slug, $bit_package->slug])}}"
                                                           class="theme-btn subscribe-btn">
                                                            ORDER NOW
                                                            <span class="arrow fa fa-angle-right"></span>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--End Pricing Section-->
@endsection