@extends('layout')

@section('title', "$service->name Service")

@section('meta:title', 'AccessWorld: ' . $service->name)
@section('meta:description', $service->short_description)
@push('styles')
    <style>
        table,th,td {
                    border: 1px solid black;
            border-collapse: collapse;
        }

        td {
            padding: 5px;
            text-align: center;
        }
        th{
            text-align: center;
        }

    </style>
@endpush
@section('content')

@include('commons.banner', [ 'banners' => $service->banner ] )

<section>
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <div class="animated fadeInUp text-center">
                    <h1 class="text-light">{{ ucwords($service->name) }}</h1>
                    <div class="section-title-line"></div>
                    <p class="text-lg">
                        {{ $service->short_description }}
                    </p>
                </div>
            </div>

            @unless(empty($service->description))
                <div class="col-xs-12">
                    <div class="card">
                        <div class="card-body">
                            <article>
                                <p class="text-justify">{!! $service->description !!}</p>
                            </article>
                        </div>
                    </div>
                </div>
            @endunless

            @php
                $function = camel_case($service->slug) . 'Packages';
            @endphp
            @if (function_exists($function))
                <div id="service-packages" itemscope itemtype="http://schema.org/Product">
                    @foreach ($function() as $package)
                        @php
                            $featured = $package->is_featured ? 'style-primary' : 'style-gray';
                            $btn_color = $package->is_featured ? 'btn-primary' : 'btn-accent';
                        @endphp
                        <div class="col-xs-6 col-md-3">
                            <div class="card card-type-pricing text-center">
                                @if ($hasDiscount = $package->discount > 0)
                                    <div class="ribbon" itemprop="offers" itemscope
                                        itemtype="http://schema.org/Offer">
                                        <span>{{ $package->discount }}% off</span>
                                    </div>
                                @endif
                                <div class="card-body {{ $featured }}">
                                    <h2 class="text-light text-default-bright">{{ $package->service->name }}</h2>
                                    <p class="text-lg text-default-bright" itemprop="name">
                                        <em>{{ ucwords($package->name) }}</em>
                                    </p>
                                    <div class="price text-default-bright">
                                        <div>Starting at</div>
                                        <span class="text-lg" itemprop="priceCurrency"
                                            content="get_local_currency_code()">{{ get_local_currency_prefix() }}</span>
                                        <h2><span class="text-lg"
                                                itemprop="price">{{ get_local_currency($package->price) }}</span></h2>
                                        @if ($service->slug == 'web')
                                            <span>/yr</span>
                                        @else
                                            <span>/mo</span>
                                        @endif
                                    </div>
                                    <br />
                                </div>
                                <div class="card-body no-padding" itemprop="description">
                                    <ul class="list-unstyled">
                                        @foreach ($package->getComponents() as $component => $value)
                                            <li>{{ strtoupper($component) }} {{ $value }}</li>
                                        @endforeach
                                        <li>24/7 Customer Support</li>
                                    </ul>
                                </div>
                                <div class="card-body">
                                    <a href="{{ route('service.package.order', [$service->slug, $package->slug]) }}"
                                        class="btn btn-raised ink-reaction {{ $btn_color }}">
                                        Get quote
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

            @endif
            @include('service.partials.custom-plan')
        </div>
    </div>
</section>
@stop